[Week2] 규서 2주차 미션_1

[LastSim]

2주차 미션에서는 React에 대한 기초 개념을 배우며 전반적인 큰 틀을 알게 되었습니다.

[sisihhy]

불필요한 리렌더링 방지: 현재 TodoProvider가 리렌더링될 때마다 add, complete, remove 함수가 매번 새로 생성됩니다. 이는 이 함수들을 props로 받는 하위 컴포넌트들의 불필요한 리렌더링을 유발할 수 있습니다.

useCallback 적용: useCallback 훅을 사용하여 이 함수들을 메모이제이션하면, input, todos 등 의존성 배열에 포함된 상태가 변경될 때만 함수를 재생성합니다. 이를 통해 앱의 렌더링 성능을 개선할 수 있습니다.

import { useState, useCallback } from "react";

// ...

const add = useCallback(() => {
  // ...
}, [input, setTodos, setInput]);

const complete = useCallback((task: Task) => {
  // ...
}, [todos, setTodos, setDoneTasks]);

// ...

[LastSim]

위에서 말씀해주신대로
첫번째로는 complete/remove가 Task 객체 대신 id를 받게 변경하여 객체 참조 문제 예방하였습니다.

두번째로는 useCallback으로 핸들러 고정, useMemo로 value 고정하여 리렌더 노이즈 감소시켰습니다.

존재하지 않는 id가 들어와도 안전하게 무시할 수 있도록 개선했습니다

위 세 가지 내요을 기반을 코드 보완 완료했습니다!

[limtjdghks]

프로젝트 폴더 이름 Guser_01 로 변경해주세요