[TIL] memoization

memoization

리렌더링의 발생조건

• 컴포넌트에서 state 변경
  • 그래서 불변성 중요
  • 모아서 한꺼번에 batch update
• props가 변경
• 부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트는 모두 리렌더링

최적화 - 렌더링을 얼마나 적게할 것인가, 불필요한 렌더링을 어떻게 줄일 것이냐
기억해야하는 이유 - 불필요한 렌더링을 방지 넣어놓고 꺼내쓰기

• React.memo

  • 컴포넌트(component)를 캐싱
  • 부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트는 모두 리렌더링되는 문제를 돕는 도구
  • 리렌더링이 필요없는 자식 컴포넌트 export default React.memo(자식컴포넌트)
  • 자식 컴포넌트가 무거울 경우에 사용(매우 가벼운거는 캐싱하는게 더 비효율적)

• useCallback

  • 인자로 들어오는 함수(function)를 캐싱
  • js에서 function은 객체의 한 종류임 -> 주소가 바뀌어서 리렌더링 됨
  • 함수의 내용이 바뀌는 것이 아니면 굳이 리렌더링 할 필요가 없음
  • 함수부분을 useCallback으로 감싸줌, 의존성 배열이 존재

• useMemo

  • 값(value)을 캐싱
  • 객체, 배열, 함수
  • 많은 데이터를 가져온다던가 첫 렌더링 외에 리렌더링 될 필요가 없는 함수 같은거에 사용