[⚛️] memoization

memoization

 

📍사용 이유

• 하위의 자식 컴포넌트는 부모의 리렌더링에 따라 어쩔 수 없이 렌더링 된다.
• 불필요한 렌더링이 발생하지 않도록 최적화
• 반드시 필요한 경우에만 사용
  +) 모든 함수를 memo 처리한다고 해서 빨라지는 것은 아님. 결국 캐싱 처리한 값은 따로 저장해야하기 때문.

 

Memo (React.memo)

 

📍특징

• 컴포넌트를 캐싱 (hook X)
• 함수형 컴포넌트를 사용 시, memo가 무효됨(좌측에 할당하듯 함수도 다시 생성됨 = 주소가 바뀜)

 

📍적용 방법

• 렌더링을 막으려는 컴포넌트에서 export default React.memo(컴포넌트명)

 

 

useCallback

 

📍특징

• 함수를 캐싱(hook O)
• 함수형 컴포넌트(함수 자체)를 memo
• 함수를 메모리 공간에 저장해두고(주소가 바뀌는 것을 막음) 특정 조건이 아닌 경우에는 변경되지 않도록 해야 함
• 함수가 변경됨에 따라 다시 memo하고 싶다면 의존성 배열 내부에 변경 시점을 입력해주기

 

📍적용 방법

•  const 함수명 = useCallback(함수로직, [ ])
  => 의존성 배열에는 변경될 특정 조건을 명시

 

 

useMemo

 

📍특징

• 값을 캐싱
• 값이 굉장히 무거울 때 렌더링이 오래 걸림
• 최초 한 번은 오래 걸림(첫 렌더링)
• 의존성 배열에 따라 캐싱의 주기를 갖는다.

 

📍적용 방법

 const 함수명 = useMemo(() => 무거운 함수() , [ ])
=> 함수의 결과값을 담기 위해 함수를 실행함