Day 8 - ReactJS로 TodoList 만들기 #1

ToDo 만들기 프로젝트를 하려고 했는데, 마침 강의에서도 간단한 todo project를 만들길래 따라 만들고 그것을 발전시키는 방향으로 공부를 해야겠다.

 

---

form tag는 submit event를 가지고 있다.

 

여러 개의 ToDo를 받을 수 있는 배열 만들기

const [toDos, setToDos] = useState([]);

setToDos((currentArray) => [toDo, ...currentArray]);

기본 값으로 비어있는 배열을 준다.

modifier인 setToDos 함수는 toDo의 값을 input에서 가져와 currentArray(toDos)에 추가해준다.

 

toDos array에 있는 각각을 컴포넌트로 바꿔주려면 map()을 사용하면 된다.

map의 인자에는 함수가 들어가는데, array.map() 이라고 하면 해당 함수는 array의 개수만큼 실행된다.

map의 첫 번째 인자로 현재의 item을 가져올 수 있다.

<hr />
      <ul>
        {toDos.map((item) => (
          <li>{item}</li>
        ))}
      </ul>

 

form tag 아래에 위의 코드를 추가하면 리스트 형식으로 하나씩 추가가 된다.

하지만 Warning이 뜬다. 

React는 기본적으로 list에 있는 모든 item을 인식하기 때문에 같은 컴포넌트의 list를 render 할 때는 key라는 prop을 추가하라고 뜨는 것이다.

 

따라서 아래의 코드처럼 key를 추가해주면 된다. index는 각각의 item마다 고유한 값이기 때문에 key 값으로 적절하다.

<hr />
      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>

디자인은.. 매우 별로지만.. 발전시켜나가보겠다..

각각의 ToDo에 대해 삭제 기능도 추가해주고 싶다.

수강하고 있는 리액트 강좌(https://nomadcoders.co/react-for-beginners/lectures/3287)의 댓글을 참고하였다.

const delBtn = (index) => {
    setToDos((curToDos) =>
      curToDos.filter((_, curIndex) => curIndex !== index)
    );
  };
  
  
 <ul>
        {toDos.map((item, index) => (
          <li key={index}>
            {item}
            <button
              onClick={() => {
                delBtn(index);
              }}
            >
              삭제
            </button>
          </li>
        ))}
      </ul>

ToDos array를 수정하는 것이기 때문에 해당 state에 대한 modifier 함수를 사용한다.

button tag의 event listener로 onClick={delBtn} 이 아닌onClick={() => delBtn(index)} 이렇게 쓰는 이유는 바로 실행되지 않고 클릭을 기다리는 함수로 쓰기 위함이다.

후자와 같이 event listener를 등록하면 ToDo들이 등록되지 않고 바로 없어져버린다.

왜 그렇게 되는지도 댓글에 친절하게 설명이 되어 있었다(감사합니다).

delBtn 함수는 index를 매개변수로 가진다. 이때 이 매개변수는 delBtn을 덮고 있는 App 컴포넌트가 한 번 실행되어야 받을수 있는데, 호출이 된 순간에는 그렇지 않기 때문에 제대로 호출이 되지 않는 것이다.

 

delBtn 함수에서 사용한 filter 함수가 JS가 익숙하지 않은 나는 이해가 잘 되지 않아 filter 함수의 구문을 살펴보았다.

 arr.filter(callback(element[, index[, array]])[, thisArg])

 

첫 번째 인자인 element는 필요하지 않아 자리변수(_)를 넣어주고, 두 번째 인자인 index로 삭제하고자 하는 ToDo인지 검사한다. '삭제' 버튼이 눌려 delBtn이 실행되면 array의 index와 delBtn의 인자로 전달된 index를 비교하여 값이 다르다면 array에 추가하고 아니라면(삭제하고자 하면) 추가하지 않는다.

 

=> ToDo 삭제까지 구현 완료! 디자인은 나중에 수정하자