[TIL] 240123(화) React 입문 개인과제 : To-do list 만들기(2) / Todo 완료/취소하기

첫 번째 리뷰에서는 form 태그를 통해 입력한 값을 받아와 card로 생성을 하고, Delete 버튼을 통해 해당 카드를 삭제하는 것 까지 살펴 보았다.

이제는 Done 버튼을 누르면 아래 Done🎉 으로 카드가 내려가고, Cancle 버튼을 누르면 위 Working...🔥으로 카드가 다시 올라가는 것을 구현해보자.

Todo Card 완료/취소하기

1. Todo 완료/취소하기

isDone의 false/ true 값을 활용하여 조건부 렌더링을 진행한다.

• cards의 배열을 map 메소드를 이용하여 재배열한다.
  → 만약에 todo의 객체의 id가 해당 클릭한 id와 동일하다면, 객체를 분해하여 (...todo) 해당 객체의 isDone의 상태를 반대로 바꾼다.
  → 이후, 바뀐 todo의 객체가 cards 배열로 새롭게 재배열 된다.
  = 버튼을 누르면, card의 isDone 상태가 false ↔ true로 바뀌어 재배열됨을 의미한다.

• 재배열된 배열인 updatedTodos를 setCards로 rendering 한다. = 화면의 UI가 바뀐다.

/* Todo 완료/취소 버튼 */
  const updateCardBtn = (id) => {
    const updatedTodos = cards.map((todo) => {
      if (todo.id === id) {
        return {
          ...todo,
          isDone: !todo.isDone,
        };
      }
      return todo;
    });
    setCards(updatedTodos);
  };

2. 버튼에 함수 연결하기

onClick을 사용하여 updateCardBtn 함수를 연결한다.

Done 버튼 : isDone : false 이면, Working...🔥 에 위치한다.
Cancle 버튼 : isDone : true 이면, Done🎉 에 위치한다.

 <button 
    id="completeBtn" 
    onClick={() => updateCardBtn(id)}
  > 
  {isDone ? "Cancle" : "Done"} 
</button>

3. Working...🔥 과 Done🎉의 TodoList 구분하기

Working과 Done은 각각 TodoList 컴포넌트를 사용하여 각각 다른 위치에 컴포넌트를 생성한다.

• Working과 Done에 위치하는 card는 isDone의 상태에 따라 배열이 달라진다.
• 각각의 TodoList에 Btn 함수도 props로 넘겨준다.

const workingCards = cards.filter((card) => !card.isDone);
const doneCards = cards.filter((card) => card.isDone);

<main>
      <TodoList
        subTitle="Working...🔥"
        cards={workingCards}
        removeCardBtn={removeCardBtn}
        updateCardBtn={updateCardBtn}
      />
      <TodoList
        subTitle="Done🎉"
        cards={doneCards}
        removeCardBtn={removeCardBtn}
        updateCardBtn={updateCardBtn}
      />
</main>