23.06.16) React를 이용해서 Todo List 만들기(3)

💻구현해야 할 기능

• Todo 완료 상태 변경하기 (완료 ↔ 진행중)

     ▷Todo의 isDone 상태가 true : 버튼의 라벨을 취소

                     isDone 상태가 false : 완료로 조건부 렌더링해야함

     ▷Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현

 

🤓오늘 공부한 내용

📌Todo 완료,취소버튼 추가하기

 1. Todo의 상태에 따라 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현하기 위해

    📌Working섹션에는 완료버튼을, ✅Done섹션에는 취소 버튼을 추가해줘야한다.

 

 2. 완료,취소 버튼을 클릭하면 수행하는 함수 추가

👉clickChangeButtonHandler 버튼핸들러는 해당 Todo 항목의 isDone 상태를 토글하는 역할

    ("토글"이란 두 가지 상태 중에서 하나를 선택하여 번갈아가며 전환하는 것을 의미.

      즉, 한 번 클릭하면 상태가 변경되고, 다시 클릭하면 이전 상태로 돌아가는 것)

//list 완료,취소 버튼
  const clickChangeButtonHandler = (clearTodo) => {
    const doneTodo = todo.map((item) => {
      if (item.id === clearTodo) {
        return {
          ...item,
          isDone: !item.isDone,
        };
      }
      return item;
    });
    setTodo(doneTodo);
  };

• (clearTodo)는 버튼이 클릭된 Todo의 식별자(ID)를 나타낸다.

     ▷ 완료 버튼을 눌렀을 때 버튼 핸들러를 통해 item.id을 (clearTodo)이 안에 넘겨받음

• map메서드를 사용하여 배열을 순회하면서 item.id가 clearTodo와 일치하는 항목을 찾으면 해당 항목의 isDone 속성을 반전시켜 완료상태를 변경한다. 

     ▷ (item.id === clearTodo)는 클릭된 버튼에 해당하는 Todo 항목을 찾기 위한 조건 

     ▷ item.id는 현재 반복하고 있는 Todo 항목의 ID이고, clearTodo 클릭된 버튼의 ID값

     ▷ 조건이 만족되면, 해당 Todo 항목의 isDone값을 반전시킨다

     ▷ 스프레드 연산자 (...item)를 사용하여 현재 Todo 항목의 모든 속성을 복사한 후,  

          isDone속성만 반전시킨 !item.isDone 라는 새로운 객체를 생성

• clickCompleteButtonHandler함수는 특정 Todo 항목의 isDone 상태를 반전시키는 역할을 하고 해당 상태가 변경된 Todo 항목들을 새로운 배열인 doneTodo에 저장
• setTodo(doneTodo)를 통해 상태를 렌더링한다.

 

 

📌작업 목록을 Working섹션과 Done섹션으로 분류하기

const workingTodos = todo.filter((item) => !item.isDone);
const doneTodos = todo.filter((item) => item.isDone);

1.workingTodos : 아직 완료되지 않은 작업들이 저장

• todo배열에서 isDone이 false인 항목들로 이루어진 배열
• filter를 사용하여 item.isDone이 false인 항목들만 선택해 새로운 배열을 생성한다

2.doneTodos : 이미 완료된 작업들이 저장

• todo배열에서 isDone이 ture인 항목들로 이루어진 배열
• filter를 사용하여 item.isDone이 ture인 항목들만 선택해 새로운 배열을 생성한다

 

 

📌Working섹션에 완료버튼 추가하기

<h2>📌Working</h2>
        <div className="list-wrap">
          {workingTodos.map((item) => (
            <div key={item.id} className="list-style">
              <h2>{item.title}</h2>
              <div>{item.content}</div>
              <div className="bth-group">
                <button className="remove-btn" onClick={() => clickRemoveButtonHandler(item.id)}>
                  삭제하기
                </button>
                <button className="isDone-btn" onClick={() => clickChangeButtonHandler(item.id)}>
                  {item.isDone ? "취소" : "완료"}
                </button>
              </div>
            </div>
          ))}
        </div>

• 섹션 분류하기 위해 todo.map에서 workingTodos.map로 변경
• clickCompleteButtonHandler 버튼을 동적으로 사용하기 위해 삼항 연산자를 사용함
  • {item.isDone ? "취소" : "완료"} : Todo 항목의 isDone속성에 따라 다르게 표시

             ▷ item.isDone이 false면 버튼의 라벨은 "완료"로 설정

             ▷ item.isDone이 true면 버튼의 라벨은 "취소"로 설정

 

 

📌Done섹션에 취소버튼 추가하기

<h2>✅Done</h2>
        <div className="list-wrap">
          {doneTodos.map((item) => (
            <div key={item.id} className="list-style">
              <h2>{item.title}</h2>
              <div>{item.content}</div>
              <div className="bth-group">
                <button className="remove-btn" onClick={() => clickRemoveButtonHandler(item.id)}>
                  삭제하기
                </button>
                <button className="cancel-btn" onClick={() => clickChangeButtonHandler(item.id)}>
                  취소
                </button>
              </div>
            </div>
          ))}
        </div>

• 섹션 분류하기 위해 todo.map에서 doneTodos로 변경

 

 

📌초기 화면에 각 섹션에 항목을 배치하기위해 state수정

const [todo, setTodo] = useState([
    { id: 1, title: "오늘 할일", content: "리액트 기초 공부하기", isDone: false },
    { id: 2, title: "오늘 할일", content: "마트가서 장 보기", isDone: true },
  ]);