react. Todo 리스트

리액트를 사용해 Todo리스트를 구현했다.

입력폼에 입력할 toDo state와 리스트를 구현할 toDos state를 생성해서,

toDo를 입력하고 onSubmit버튼을 누르면 setToDos(currentArray => [toDo, ...currentArray]);

입력폼에 입력한 toDo + 누적된 toDo들로 새로운 배열을 만든다. 여기서, ...currentArray는 배열을 풀고 문자열을 나열함! 이제 이 값을 li로 뿌려준다.

리액트는 기본적으로 list에 있는 모든 item을 인식하기 때문에 key를 넣어 고유하게 만들어줘야 한다.
map의 첫 번째 argument는 배열의 data, 두번째는 index 즉, 숫자를 의미한다. 
다른 array function들도 보통 그런 것같다.

그래서 {toDos.map((item, index) => {item})};  = {{item},{item},{item}...} 배열을 만들어 각자 고유의 key를 가지게 하는 것을 뜻한다.

그럼 그 index값을 li의 key속성으로 지정~!

---

그 후 삭제버튼을 구현했는데,

button onClick={( ) => deleteBtn(index)}
기존 map을 이용해 얻은 index 값을 버튼 클릭시 넘겨주고, 클릭한 li의 index값과 일치하는지 여부를 filter 함수 조건으로 비교하고 새로운 배열로 만든다.

여기서 filter함수의 매개변수도 map처럼 첫번째는 array[0]부터의 data 값, 두번째는 배열을 구성하는 요소의 index가 들어간다.

  const deleteBtn = (index) => {
    setToDos(toDos.filter((item, toDoIndex) => index !== toDoIndex))
  }

그럼 완성!