[React] 최적화 마지막

현재의 문제.

1개를 삭제해도 나머지 일기들이 모두 리랜더링 되고있다.

나중에 몇 백 몇 천 몇 십만장이 있다고 생각하면 메모리낭비가 심하게 될거라는걸 알 수있음

 

 

 

Hooks API Reference – React

export default React.memo(DiaryItem);

일단 DiaryItem을 React.memo 로 묶어서 최적화작업을 시작 해주었다.

 

 

 

 

그다음 useEffect를 활용해서 어떤 아이템들이 리랜더링 되는지 확인

    useEffect(() => { console.log(`${id}번 째 아이템 랜더!`) })
    const [isEdit, setIsEdit] = useState(false);
    const toggleIsEdit = () => setIsEdit(!isEdit);

 

 

 

 

 

 

DiaryItem 컴포넌트 중 onEdit, onRemove는 Data state가 변화하면 재생성 되어야 하는 함수이기 때문에 onCreate최적화 방법과 똑같이 useCallback을 사용해 함수형 업데이트를 할 것이다

 

 

 

 

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

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

 

useCallback 추가 후 삭제나 수정을하면 .

 

 

전체가 아니라 해당되는 부분의 data state만 랜더링 되는걸 확인 할 수 있다

 

 

 

참고:

- 한 입 크기로 잘라먹는 리액트