중국 다녀와서 그런지 피곤한다. React Memoization(메모이제이션)에 대한 스케치 포스팅이다.

01. Memoization(메모이제이션)

메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행속도를 빠르게 하는 기술이다.

01-1. React.memo()

const Component = React.memo((props) => {
	return (/*컴포넌트 렌더링 코드*/)}
);

함수 컴포넌트에서는 라이프 사이클을 사용할 수 없다. 그래서 React.memo라는 함수를 사용한다. 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수 컴포넌트의 리렌더링 성능을 최적화 해 줄 수 있다.

React.memo는 props 변화에만 영향을 줍니다. React.memo로 감싸진 함수 컴포넌트 구현에 useState, useReducer 또는 useContext 훅을 사용한다면, 여전히 state나 context가 변할 때 다시 렌더링됩니다.

컴포넌트 자체를 메모이제이션, 자체적으로 props값을 비교해서 달라진 부분이 없다면 리액트 DOM에서 비교 작업이 들어가지 않는다.

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

useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 이전 값을 기억해두었다고 조건에 따라 재활용하여 성능을 최적화 하는 용도로 사용된다. 메모이즈 된 값을 return하는 Hook이다.

2번째 인자로 넘어온 의존 인자 중에 하나라도 값이 변경되면 1번째 인자의 함수를 재실행한다. 만약 인자를 전달하지 않는다면 매번 새롭게 계산하여 return한다.

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

함수 자체를 메모이제이션한다. 자바스크립트에서 함수는 객체로 취급되기 때문에 리렌더링이 일어날 때마다 새로운 함수가 생성한다.

자식 컴포넌트에 Prop으로 새로 생성된 함수가 넘겨지게 되면 불필요한 리렌더링이 일어날 수 있기에 리렌더링을 막기 위해선 useCallback()으로 감싸줘야 한다.

useCallback(fn, deps)은 useMemo(() => fn, deps)와 같다.