이제서야 사용방법을 제대로 알게된 것 같아 다시 업로드 하게 되었다.
간단한 이름을 추가하는 앱을 만들고 사용법을 알아보도록 하자
우선 input태그와 button 태그로 이루어진 이름을 업로드 하는 앱이 있다고 가정하자.
우선 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;