[React] useState연습 - 기존 배열에 값 새로 추가하기

import {useState} from 'react';

const App = () => {
    const[names, setNames] = useState(['가', '나']);
    const[input, setInput] = useState("");


    const handleInputChange = (e) => {
        setInput(e.target.value);
    }

    // Usestate이용하여 기존 배열에 새로운 값 추가하기
    const handleUpload = () => {
        setNames((prevState) => {
            console.log(prevState);


            //새로운 input이 기존 배열의 뒤에 추가된다.
            //예를들어 '다'를 새로 입력하여 추가할 경우 input은 [가, 나, 다]가 된다. 
            return [...prevState, input]


            // 새로운 input이 이전 값보다 앞에 놓이게 된다.
            // 예를들어 '다'를 새로 입력하여 추가할 경우 input은 [다, 가, 나]의 순서
            // return [input, ...prevState]
        });
    }

    return(
        <>
        <input type="text" value={input} onChange={handleInputChange}/>
        <button onClick={handleUpload}>Upload</button>
        {names.map((name, index) => {
            return <p key={index}>{name}</p>
        })}

        {names.map((item, index)=> {
            return (
                <>
                <li key={index}>{item}</li>
                </>
            )
        })}
        </>
    )
}

export default App;

 

참고 강의 : https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=2