[React] 최적화 3

📌 저번 시간에 배웠던 React.memo를 SimpleDiary에 적용하기

1️⃣ 최적화할 컴포넌트 찾기

어떤 컴포넌트가 최적화할 컴포넌트 일까?
React Developers Tools의 Highlight updates when components render. 기능을 활용할 예정
최적화 하는 이유 필요없는 리랜더를 줄일 수 있다.

2️⃣ DiaryEditor.js 최적화

useEffect(() => {
  console.log("DiaryEditor 랜더");
});

를 통해서 처음에 마운트 될 때, 2번 랜더링 되는 것을 확인할 수 있다. -> 왜? 처음에 빈 배열이 랜더링, 그 다움에 onCreate를 통해서 리랜더링. 그래서 일기 배열을 삭제하면 onCreate가 변경 -> DiaryEditor도 리랜더되는 것이다.

해결 방법? ->

1. useMemo 를 통해서 []값이 수정될 때만 수정되도록 할 수 있다고 생각하지만 useMemo 같은 경우는 값 을 전달하는 것이지 함수를 객체로 전달하는 것이 아니다. -> X
2. useCallback 을 통해서 다음과 같이 수정한다.

// App.js
const onCreate = useCallback((author, content, emotion) => {
  const created_date = new Date().getTime();
  const newItem = {
    author,
    content,
    created_date,
    emotion,
    id: dataId.current,
  };
  dataId.current += 1;
  setData([newItem, ...data]);
}, []);

근데 이렇게 되면 빈 배열이 …data로 전달되면서 원래 있던 일기 리스트들이 없어졌다. -> 값이 바뀔 때만 리랜더 되면서, 일기 배열을 없어지지 않게 하는 방법 🔽

const onCreate = useCallback((author, content, emotion) => {
  const created_date = new Date().getTime();
  const newItem = {
    author,
    content,
    created_date,
    emotion,
    id: dataId.current,
  };
  dataId.current += 1;
  setData((data) => [newItem, ...data]);
}, []);

이렇게 수정하면 처음에 랜더링도 한 번만 되고, 일기가 삭제가 되어도 랜더링이 되지 않는다.