React 메모이제이션 사용하기

메모이제이션

메모제이션이란 계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 저장된 값을 꺼내 쓰는 것을 말한다.

React.memo

React.memo는 의존하는 값들이 변경되었을 때만 렌더링이 일어난다.(React.memo는 훅이 아닌 HOC다.)

 

사용법

퍼포먼스 최적화를 원하는 컴포넌트를 React.memo로 감싸주기만 하면 된다.

React.memo(Component);

아래 컴포넌트를 예시로 보면 props인 label과 onClick이 바뀌었을 때만 렌더링이 일어난다.

import { memo } from 'react';

const Button = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default memo(Button);

두번째 인자에 propsAreEqual 함수를 넘겨 원하는 값만 비교해 렌더링 여부를 결정 할 수도 있다.

export default memo(
  Button,
  (prevProps, nextProps) => prevProps.label === nextProps.label,
);

onClick의 변경 여부와는 상관없이 label이 변경됐을 때만 렌더링이 일어난다.

useMemo

useMemo는 전달된 함수가 실행되고 반환된 결과 값을 저장한다.

아래와 같은 상황에서 사용을 권장한다.

---

• Pure Functional Component에서
• Rendering이 자주 일어날 경우
• re-rendering이 되는 동안 계속 같은 props값이 전달 될 경우
• UI element의 양이 많은 컴포넌트의 경우

사용법

첫번째 인자로 함수를 넘겨주고 두번째로 의존배열을 전달한다.

const calc = useMemo(() => a + b, [a, b]);

전달된 의존값이 변경되거나 부모 컴포넌트가 리렌더링 되지 않는 이상 첫 번째 함수는 다시 실행되지 않는다.

function App() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(1);

  const calc = useMemo(() => a + b, [a]);
  // calc === 1 -> true

  return (
    <div className="App">
      <button onClick={() => setB(b + 1)}>plus</button>
    </div>
  );
}

의존성 배열에 b가 들어가 있지 않으니 결과 값은 항상 1이 나온다.

useCallback

useMemo는 실행된 결과 값을 저장한다면 useCallback은 함수 그 자체를 저장한다.

 

사용법

사용법은 useMemo와 동일하다.

// make
const calc = useCallback(() => a + b, [a, b]);

// use
calc();

useCallback도 마찬가지로 전달된 의존값이 변경되거나 부모 컴포넌트가 리렌더링 되지 않는 이상 함수는 다시 생성되지 않는다.

function App() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(1);

  const calc = useCallback(val => val + a + b, [a]);
  // calc === 1 -> true

  useEffect(() => {
    console.log(calc(10));
    // result 11
  }, [b]);

  return (
    <div className="App">
      <button onClick={() => setB(b + 1)}>plus</button>
    </div>
  );
}

의존성 배열에 b가 들어가 있지 않으니 결과 값은 항상 11이 나온다.

참고

React.memo, useMemo, useCallback이 퍼포면스 최적화를 위해 사용되지만 최적화를 위한 연산이 불필요할 경우엔 비용만 발생하기 에 무조건적인 사용은 지양한다. 때문에 꼭 필요한 상황에서만 그리고 사용했을 때 확실하게 퍼포먼스 향상이 일어나는 곳에서만 사용하는게 좋다.