For 예제2 - 배열에 목록 추가하기

 

목록 추가시, push를 하면 안되고, 

concat 을 사용한다는 게 중요.

import React, { useState } from 'react';

function For2(props) {

    const [fruitList, setFruitList] = useState(["딸기", "배", "사과", "포도", "수박", "망고", "오렌지"]);

    const [fruit, setFruit] = useState("");

    //모던스크리브가 배열에 forEach, map, reduce 함수를 추가하고

    //forEach 배열의 요소마다 출력과 관련된 함수를 매개변수로 전달

    //map은 매개변수로 콜백함수 - 반환값이 있는 콜백함수

    const onChange = (e) => {

        setFruit(e.target.value);

    }

    const goAppend = () => {

        // push() 를 사용하면, 자바스크립트가 새로 배열을 만들어서 추가시키고 원래건 삭제 시키는 방법

        // 그런데, state 의 배열의 값을 바꾸면 안된다.

        setFruitList(fruitList.concat(fruit));

        setFruit("");

    }

    return (

        <div>

            <h1>과일목록</h1>

            <input type="text" onChange={onChange} value={fruit}/>

            <button type="button" onClick={goAppend}>추가하기</button>

            <table>

                {

                    fruitList.map( (item, index) => {

                        return (

                            <tr key={index}>

                                <td>{index}</td><td>{item}</td>

                            </tr>

                        )

                    })

                }

            </table>

        </div>

    );

}

export default For2;