이제서야 사용방법을 제대로 알게된 것 같아 다시 업로드 하게 되었다.

간단한 이름을 추가하는 앱을 만들고 사용법을 알아보도록 하자

우선 input태그와 button 태그로 이루어진 이름을 업로드 하는 앱이 있다고 가정하자.

구현할 항목

1. input안에 text가 입력된다.
2. Upload버튼을 누르면 항목이 화면에 추가된다.

우선 input안에 텍스트를 useState로 관리할 것이다.

const [names, setNames] = useState(['이정후'])

초깃값은 배열을 넣어주었다. 하지만 저렇게 해서는 초깃값 '이정후'가 화면에 출력되지 않는다. 저 names를 화면에 띄워보자

button 태그 아래, props를 받는 names에 map함수를 적용했다.

화면에는 잘 나오지만 에러가 발생한 모습, 에러 메시지를 보면 'key'값을 가지고 있어야 한다.

idx를 새로 key값으로 넘겨주면 에러는 사라진다.(배열의 index값)
리액트에서 map을 사용해서 엘리먼트를 출력하려면 key값이 꼭 필요하다고 한다.

input에 입력한 항목을 업로드 하려면, input에 있는 값이 어떤 값인지 트랙킹해야 한다. 새로운 상태관리가 필요하므로 useState를 다시 생성하자.

const [value, setValue] = useState('');

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

onChange함수에 들어갈 handleChange를 작성해보자.

e는 저번에 작성한 글이 있으니 참고.

콘솔을 보면 인풋안의 텍스트를 잘 트래킹하는것을 확인할 수 있다.

마지막을 남은것은 Upload버튼을 누르면 이름들이 추가가 되는것,

button태그에 들어갈 handleClick 함수이다.
setNames에 콜백함수의 인자로 prevState, 즉 이전 상태값을 전달 후 return 값으로 배열을 받는데, 새로 들어간 input과 spread문법으로 이전의 상태들이 같이 보여지는 것이다.

이렇게 하면 완료!

최종 코드

import { useState } from 'react';

const UseState = () => {
    const [names, setNames] = useState(['이정후']);
    const [value, setValue] = useState('');

    const handleChange = (e) => {
        setValue(e.target.value)
        // console.log(value)
    }

    const handleClick = () => {
        setNames((prevState) => {
            // console.log('prevState :', prevState)
            return ([value, ...prevState])
        })
    }


    return (
        <div>
            <input type="text" value={value} onChange={handleChange} />
            <button onClick={handleClick}>Upload</button>
            {names.map((name, idx) => {
                return <p key={idx}>{name}</p>
            })}
        </div>
    )
}

export default UseState;