[간단 일기장] 최적화4. 마무리

문제: 삭제할때마다 모든 DiaryItem이 랜더링됨

=> 요 두개를 최적화해볼거다!

최적화의 시작: React.memo로 컴포넌트 묶어주기

-> 보니까 onRemove, onEdit은 데이터 state가 변하면 재생성될수밖에 없는 함수들임 => 즉, useCallback이용해서 setState에 배열로 바뀌는 값 담아줘야!

onRemove

여기에서

이렇게 변화해야함

• 데이터를 다루는 부분을 전달해서 데이터를 리턴하는 방식으로!

onEdit

함수형으로 setData 업데이트!

  const onEdit = useCallback((targetId, newContent) => {
    setData((data) =>
      data.map(
        (it) => (it.id === targetId ? { ...it, content: newContent } : it)
        // ...it 들어온 데이터 뿌려주고, content만 새로운 content로!
      )
    );
  }, []);