[React] 리액트 메모이제이션 훅

메모이제이션이란 자바스크립트의 캐싱 기술중 하나이며 메모리에 특정 정보를 기록해두고 필요할때 마다 정보를 가져와 활용하는 기법이다.

 

리액트에서는 useCallback과 useMemo라는 훅으로 사용이 가능하며, 불필요한 렌더링을 줄여 퍼포먼스를 최적화 시켜주기에 사용법을 알아두는 편이 좋다.

 

 

useMemo

전달된 함수가 실행되고 반환된 결과를 캐싱한다.

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

useMemo는 두 번째 인자가 바뀌지 않는 한 다시 실행되지 않는다.

 

 

 

useCallback

useCallback은 전달된 함수 자체만 캐싱한다. useCallback은 useMemo를 기반으로 만들어졌으며 함수를 사용할 때 편하게 작성할 수 있도록 해준 것이다.

import { useCallback } from 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

useCallback역시 두 번째 인자가 바뀌지 않는 한 다시 실행되지 않는다.

 

* 함수를 자식컴포넌트에 props로 넘길 때 useCallback을 사용하지 않으면 매번 새로운 함수가 실행되어 자식 컴포넌트에서 부모로 부터 받은 props가 바뀌었다고 인식돼 자동으로 리렌더링이 발생한다.

 

 

 

제로초님의 React 기본 강좌를 참고했습니다.

https://www.youtube.com/watch?v=6H6KncvVc8s&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=52