[일기장 만들기_13] 최적화 완성

목표

- 프로젝트 전체 최적화 작업

---

나머지 최적화 하기

1개의 게시물을 삭제 했는데 나머지 아이템까지 리렌더링 일어남 => 게시물이 많거나 이미지가 포함될 경우에는 큰 메모리가 낭비 되기 때문에 심각한 문제가 발생!

 

1. 최적화의 시작은 React.memo로 컴포넌트를 묶어주는것!

export default React.memo(DiaryItem);

 

2. useEffect를 활용해서 어떤 아이템이 리렌더링 되고 있는지 확인 (리프레시 전체 렌더 확인)

useEffect(() => {
    console.log(`${id}번째 아이템 렌더!`);
});

0번 부터 19번의 아이템이 찍히는걸 확인할 수 있다.

 

3. App 컴포넌트의 onRemove 와 onEdit 최적화

  const onRemove = useCallback((targetId) => {
    setData(setData => data.filter((it) => it.id !== targetId));
  },[]);

  const onEdit = useCallback((targetId, newContent) => {
    setData((data) =>
      data.map((it) => it.id === targetId ? {...it, content: newContent} : it)
    );
  },[]);

디펜던시 어레이에 빈값으로 처리해주고, 함수형 업데이트를 사용해준다.

 

4. 삭제를 해도 콘솔에 추가적으로 안찍히고, 추가시에는 방금 추가한 아이템만 렌더링 된다!

---

​Demo : winterlood​ - codesandbox​