setState()함수를 쓸 때는 두 가지 방법이 있다.
첫째는 값을 직접 보내는 것,
둘째는 함수를 보내는 것 - 첫번째 인자(argument)로 현재 state값을 넣고 이 값을 이용해 계산을 하거나 새로운 state를 만들 수 있다.
setToDo("");
setToDos((currentArray) => [toDo, ...currentArray]);
map()
은 자바스크립트 함수로, array의 모든 item에 대해 실행되는 함수를 넣을 수 있고 그 결과를 모아 새로운 배열을 반환한다.
다음과 같이 배열의 각 원소를 <li>
태그 안에 넣어 리스트로 만들 수 있다.
<ul>
{toDos.map((item) => <li>{item}</li>)}
</ul>
그런데 이때 한 오류가 뜨는데...
바로 이 오류...
unique한 key값을 주면 해결된다.
map함수의 두번째 argument는 index로, 원소마다 고유한 값이다.
{toDos.map((item, index) => <li key={index}>{item}</li>)}