[Today I Learned] React에서의 메모이제이션

메모이제이션??

연산의 결괏값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때(반복적일때) 재사용하는 기법이다. React에서 제공하는 메모이제이션기법은 React.memo, useMemo와 useCallback 등이 있다.

React.memo

React.memo 는 컴포넌트 자체를 메모이제이션한다. 부모 컴포넌트로 넘겨받는 props가 같다면 메모이제이션 해둔 렌더링 결과를 가져온다. 메모이제이션 한 내용을 재사용하여 렌더링시 가상 DOM에서 달라진 부분을 확인하지 않아 성능 상의 이점이 생기게 된다.

// 방법 1
const Result = React.memo(() => {
  return ()
})

// 방법 2
export default React.memo(Result)

useMemo

useMemo 는 메모이제이션 된 값을 return 하는 훅이다. useMemo는 이전 값을 기억해두었다가 조건에 따라 재활용하여 성능을 최적화하는 용도로 사용된다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback

useCallback 은 함수 자체를 메모이제이션한다. 자바스크립트에서 함수는 객체로 취급되기 때문에 리랜더링이 일어날 때마다 새로운 함수가 생성된다. 자식 컴포넌트의 불필요한 리랜더링을 막기 위해선 useCallback으로 감싸줘야 한다. deps에 들어있는 의존성 값이 변경되지 않는다면 이전에 생성한 함수의 참조 값을 반환해준다.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);