React復習(2)

クラス#クラス#

import React from 'react';
import { Component } from 'react';

class Event extends Component{
    state = {
        message: ""
    }

    render() {
        return(
            <div>
                <h1>이벤트를 배워보자!!</h1>

                <input 
                    type="text" 
                    name="message"
                    placeholder="여기에 글을 써보세요"
                    value={this.state.message} 
                    onChange={
                        (e) => {
                            this.setState({
                                message: e.target.value
                            })
                        }
                    } 
                />

                <button onClick={
                    () => {
                        alert(this.state.message);
                        this.setState({
                            message: ""
                        })
                    }
                }>
                    클릭
                </button>
            </div>
        );
    }
}

export default Event;

import React from 'react';
import { Component } from 'react';

class Event extends Component{
    state = {
        message: ""
    }

    eventChange = (e) => {
        this.setState({
            message: e.target.value
        })
    }

    eventClick = () => {
        alert(this.state.message);
        this.setState({
            message: ""
        })
    }

    render() {
        return(
            <div>
                <h1>이벤트를 배워보자!!</h1>

                <input 
                    type="text" 
                    name="message"
                    placeholder="여기에 글을 써보세요"
                    value={this.state.message} 
                    onChange={this.eventChange} 
                />

                <button onClick={this.eventClick}>
                    클릭
                </button>
            </div>
        );
    }
}

export default Event;

import React from 'react';
import { Component } from 'react';

class Event extends Component{
    state = {
        username: "",
        message: ""
    }

    eventChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    eventClick = () => {
        alert(this.state.username + ": " + this.state.message);
        this.setState({
            username: "",
            message: ""
        })
    }

    render() {
        return(
            <div>
                <h1>이벤트를 배워보자!!</h1>

                <input 
                    type="text" 
                    name="username"
                    placeholder="이름을 적어주세요"
                    value={this.state.username} 
                    onChange={this.eventChange} 
                />

                <input 
                    type="text" 
                    name="message"
                    placeholder="여기에 글을 써보세요"
                    value={this.state.message} 
                    onChange={this.eventChange} 
                />

                <button onClick={this.eventClick}>
                    클릭
                </button>
            </div>
        );
    }
}

export default Event;

かんすうがた

import React from 'react';
import { useState } from 'react';

const Event = () => {
    const [username, setUsername] = useState("");
    const [message, setMessage] = useState("");

    const onChangeUsername = (e) => setUsername(e.target.value);
    const onChangeMessage = (e) => setMessage(e.target.value);

    const onClick = () => {
        alert(username + ": " + message);
        setUsername("");
        setMessage("");
    }

    const onKeyPress = (e) => {
        if(e.key === "Enter"){
            onClick();
        }
    }

    return(
        <div>
            <h1>리엑트 이벤트 배워보자!</h1>

            <input 
                type="text"
                name="username"
                value={username}
                placeholder="이름을 적어주세요"
                onChange={onChangeUsername}
            />

            <input 
                type="text"
                name="message"
                value={message}
                placeholder="이름을 적어주세요"
                onChange={onChangeMessage}
                onKeyPress={onKeyPress}
            />

            <button onClick={onClick}>클릭</button>
        </div>
    );
}

export default Event;

Map()

const food = ["삼겹살", "회덮밥", "커피", "김밥"];
const yummy = food.map(function(foods){
    return "맛있겠다 " + foods;
});

console.log(yummy);

const food = ["삼겹살", "회덮밥", "커피", "김밥"];
const yummy = food.map(foods => "맛있겠다 " + foods);

console.log(yummy);

['맛있겠다 삼겹살', '맛있겠다 회덮밥', '맛있겠다 커피', '맛있겠다 김밥']

import React from 'react';

const Example = () => {
    const food = ["삼겹살", "회덮밥", "커피", "김밥"];
    const foodList = food.map((foods, index) => <li key={index}>{foods}</li>);

    return(
        <div>
            {foodList}
        </div>
    );
}

export default Example;

アレイconcat()の追加

import React, { useState } from 'react';

const Example = () => {
    const [food, setFood] = useState([
        {id: 1, text: "삼겹살"},
        {id: 2, text: "회덮밥"},
        {id: 3, text: "커피"},
        {id: 4, text: "김밥"}
    ]);

    const [inputText, setInputText] = useState("");
    const [nextId, setNextId] = useState(5);

    const onChange = (e) => setInputText(e.target.value);
    const onClick = () => {
        const nextFood = food.concat({
            id: nextId, text: inputText
        });
        setNextId(nextId + 1);
        setFood(nextFood);
        setInputText("");
    }

    const foodList = food.map(foods => <li key={foods.id}>{foods.text}</li>);

    return(
        <div>
            <input type="text" value={inputText} onChange={onChange} />
            <button onClick={onClick}>추가</button>
            {foodList}
        </div>
    );
}

export default Example;

filter()

const numbers = [1,2,3,4,5,6];
const biggerThanThree = numbers.filter(number => number > 3);
console.log(biggerThanThree);

=> [4,5,6]

const numbers = [1,2,3,4,5,6];
const withoutThree = numbers.filter(number => number !== 3);
console.log(withoutThree);

=> [1,2,4,5,6]

import React, { useState } from 'react';

const Example = () => {
    const [food, setFood] = useState([
        {id: 1, text: "삼겹살"},
        {id: 2, text: "회덮밥"},
        {id: 3, text: "커피"},
        {id: 4, text: "김밥"}
    ]);

    const [inputText, setInputText] = useState("");
    const [nextId, setNextId] = useState(5);

    const onChange = (e) => setInputText(e.target.value);
    const onClick = () => {
        const nextFood = food.concat({
            id: nextId, text: inputText
        });
        setNextId(nextId + 1);
        setFood(nextFood);
        setInputText("");
    }

    const onRemove = id => {
        const nextFood = food.filter(
            food => food.id !== id
        );
        setFood(nextFood);

    }

    const foodList = food.map(foods => <li key={foods.id} onDoubleClick={() => onRemove(foods.id)}>{foods.text}</li>);

    return(
        <div>
            <input type="text" value={inputText} onChange={onChange} />
            <button onClick={onClick}>추가</button>
            {foodList}
        </div>
    );
}

export default Example;