[2024.05.17] TIL 22일차

[ 본캠프 22일차 기록 ]

🖥️ 오늘 공부한 내용 🖥️

react 과제 재제출

1. 튜터님 피드백
   

• filter를 여러번 호출하는 대신 for문 사용해서 불필요한 동작을 줄임
• map 안에 내부요소 없이도 불변성이 유지되어서 필요없는 코드들은 최대한 지우고 수정

  // App.jsx
  
  const updateLists = (list) => {
    const updatedTodo = [];
    const updatedDone = [];

    for (const item of list) {
      if (item.isDone) {
        updatedDone.push(item);
      } else {
        updatedTodo.push(item);
      }
    }

    return [updatedTodo, updatedDone];
  };

  const toggleDone = useCallback(
    (id) => {
      const updatedTodoList = todo.map((item) => {
        if (item.id === id) {
          item.isDone = !item.isDone;
        }
        return item;
      });

      const [updatedTodo, updatedDone] = updateLists(updatedTodoList);
      setTodo(updatedTodo);
      setDone((prevDone) => [...updatedDone, ...prevDone]);
    },
    [todo]
  );

  const toggleCancle = useCallback(
    (id) => {
      const updatedDoneList = done.map((item) => {
        if (item.id === id) {
          return { ...item, isDone: !item.isDone };
        }
        return item;
      });

      const [updatedTodo, updatedDone] = updateLists(updatedDoneList);
      setTodo((prevTodo) => [...prevTodo, ...updatedTodo]);
      setDone(updatedDone);
    },
    [done]
  );

  const onRemove = useCallback((id) => {
    setTodo((prevTodo) => prevTodo.filter((cards) => cards.id !== id));
    setDone((prevDone) => prevDone.filter((cards) => cards.id !== id));
  }, []);

  const todoList = useMemo(() => todo, [todo]);
  const doneList = useMemo(() => done, [done]);