컴포넌트 최적화

컴포넌트가 리렌딩 되는 경우

1. 본이이 가진 State의 변화가 생길 때
2. 부모 컴포넌트가 리렌더링 되었을 때
3. 자신이 받은 prop이 변경될 때

useCallback

메모이제이션(최적화)된 콜백을 반환
그 메모이제이션(최적화)된 버전은 콜백의 의존성이 변경되었을 때에만 변경된다.
즉, 두번째 인자로 들어오는 배열이 변화하지 않으면, 첫번째 인자로 들어온 콜백함수를 재사용할 수 있게 해준다.

프로젝트 비 최적화 상황

App.js가 초기 렌더링 되면서 DiaryEditor의 state가 변경되지 않았음에도 렌더링이 일어나는 현상이 있다.
또한, 일기 List가 삭제 될때에도 DiaryEditor는 변화하지 않았음에도 리렌더가 된다.
불필요한 컴포넌트의 런데링을 최적화할 필요가 있다.
DiaryEditor 컴포넌트가 리렌더링 되게 하는 요인은 props로 받는 onCreate함수가 App.js가 리렌더링 되면서 다시 선언되기 때문에 그때마다 props가 변화되어 DiaryEditor 컴포넌트가 리렌더링 되고 있다.

함수 최적화

• useMemo()는 함수가 이전의 값을 재사용할 수 있도록 돠와주는 기능을 가지고 있으나, onCreate는 DiaryEditor컴포넌트에 함수의 형태의 prop으로 전달되어야 하기 때문에 사용하기엔 적합하지 않다.
• 따라서 콜백함수를 반환하는 useCallback()을 사용해 함수형태로 전달하되, 최적화된 형태의 함수로 전달 할 수 있다.

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

• 위의 코드는 App.js가 mount된 상태에서 한 번만 작동된 상태이며 onCreate의 값이 변화하지 않으면 mount된 순간의 콜백함수를 재사용하게 된다.

최신 state 받기

함수형 업데이트

❗ 매개변수의 값은 아무것도 주지 않은 상태에서 usecallback()함수 안에 있는 콜백함수가 선언된 시점의 상태(state값이 선언된 시점<초기화값>의 값)가 되어 변화된 값을 얻지 못해 업데이트를 할 수 없는 현상이 일어난다.

이러한 현상을 막고자 state의 상태 변화함수에 함수형 엡데이트를 해주게 되면 최신의 state를 받아 렌더링 할 수 있다.

setData((data) => [newItem, ...data]);

• setData 함수가 실행될 때의 data의 값(실행된 시점의 data값)을 화살표 함수의 매개변수로 받고 [newItem, ...data]에 data로 들어가게 되면서 state에 다시 값으로 변화시키게 된다.

---

정리

최적화관련 기능

useMemo() : 값을 반환;
React.memo() : 컴포넌트를 반환
sueCallback() : 최적화된 콜백함수를 반환

useCallback