[TIL] 내일배움캠프 React 과정 2024.05.13

오늘의 한 일

• 코딩테스트 연습
  • 과일 장수
• 챌린저스 반 수업
  • Promise와 비동기
  • React 기본 개념
• 개인 과제 (To-do-list 만들기)

오늘의 문제 해결

문제

• isDone의 상태가 false -> true로 바뀌었을 때 리렌더링이 되지 않는다??
• 객체 배열의 객체 속성이 변하는 거라 useState에서 감지를 못한 걸까??
• 리스트를 복사해서 새로 만들어 보아도 카드가 Done으로 움직이지를 않았다.

문제 해결(튜터님과의 상담)

• 알고보니 단순히 코드에서 실수가 있었다

  todoList.forEach((todo) => {
    if (!todo.isDone) { //todo.state로 되어있었다...
      workList.push(todo);
    } else if (todo.isDone) { //todo.state로 되어있었다...
      doneList.push(todo);
    }
  });

• 객체 속성을 바꾸는 과정에서 Done으로 바뀌는 조건도 변경하는 것을 깜빡했다...
• 그래도 이로써 필수적인 기능은 구현이 끝났다!

튜터님의 추가적인 조언

1. 두 가지 리스트를 나누는 방법 리팩토링

   • 기존: todoList를 만들고 이를 workList와 doneList로 나누는 방식을 사용했다

   • 조언: 시간 복잡도에서 n이 크지 않은 경우 가독성이 높게 filter를 2번 쓰는 방식을 사용했다.

     // 수정 전 방식
     let workList = [];
     let doneList = [];
     
     todoList.forEach((todo) => {
     if (!todo.isDone) {
       workList.push(todo);
     } else if (todo.isDone) {
       doneList.push(todo);
     }
     });

     // 수정 후 방식
     const workList = todoList.filter(todo => !todo.isDone)
     const doneList = todoList.filter(todo => todo.isDone)

2. 비즈니스 로직과 뷰 분리할 수 있게 리팩토링
   - Card.jsx에서 todoList를 관리하거나 알 필요가 없어진다.
   - 제일 상위 컴포넌트인 App.jsx에서 todoList와 관련된 비즈니스 로직을 모두 처리한다.

   //기존 Card.jsx
   function Card({ id, todoList, setTodoList, title, content }){
   function onClickState() {
    setTodoList(todoList.map((todo) => todo.id === id ? {...todo, isDone: !todo.isDone}: todo))
   }
   }

   //수정된 Card.jsx
   function Card({ id, handleToggleDone, title, content }){
    	handleToggleDone(id);
    }
   }

3. 네이밍은 좀 더 직관적으로!

   • 나름 고민한거지만 더 좋은 네이밍을 고민해봐야겠다!!

   오늘의 회고

   오늘 수준별 분반 보충 수업과 첫 수업이 있어서 정신 없이 하루가 지나갔다. 오늘은 문제 해결 말고도 강의 내용도 기록하고 싶었는데 이건 시간 관계상 또 분량상 내일 다른 페이지에 기록해야할 것 같다.. 그래도 개인 과제의 기능적인 구현은 끝내서 한 숨 덜었지만 구조를 조금 더 다듬을 필요가 있다는 것을 알게 된 만큼 내일도 바쁘게 코드를 짜야할 것 같다. 뭔가 이것저것 할 게 생긴만큼 정신 빠짝차리고 열심히 해보자!