useMemo vs useCallback vs React.memo

리액트로 프로젝트를 진행하다보면 불필요한 리렌더링이 반복되는 등, 다음과 같은 성능 이슈를 마주하게 된다.

1. 굳이 렌더링될 필요 없는 컴포넌트가 ‘반복’적으로 리렌더링 되는 경우
2. 컴포넌트가 렌더링 될 때마다 쓸데없이 내부 로직이 다시 만들어지거나 복잡한 계산이 ‘반복’되는 경우

이러한 불필요한 반복들을 줄이기 위해서 ‘결과를 기억’해두고 재사용하는 방법인 메모이제이션(Memoization)을 통해 성능 최적화를 할 수 있다.

🤔 메모이제이션(Memoization)이 무엇인가요?

메모이제이션(Memoization)이란 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장해 두었다가 꺼내 씀으로써 중복 계산을 제거하여 프로그램 실행 속도를 빠르게 하는 기법이다. 캐싱(caching)이라는 단어와 비슷하다.

리액트에서 메모이제이션을 활용하는 여러가지 방법으로 React.memo, useMemo, useCallback 등이 있다.

🤔 useMemo에 대해 설명해주세요.

uesMemo는 memoized된 ‘값’을 반환하는 훅 함수로, fn 함수의 결과를 dependencies가 변경될 때마다 캐싱한다.

const cachedValue = useMemo(fn, dependencies)

🤔 useCallback에 대해 설명해주세요.

useCallback은 memoized된 ‘함수’를 반환하는 훅 함수로, 전달된 fn 함수를 메모이제이션하여 캐싱한다. dependencies에 포함된 값이 변경되지 않는다면 캐싱해둔 fn 함수의 참조 값을 그대로 반환한다.

const cachedFn = useCallback(fn, dependencies)

🤔 React.memo에 대해 설명해주세요.

React.memo는 컴포넌트 자체를 메모이제이션하는 고차 컴포넌트(HOC)다.

import { memo } from 'react';

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

고차 컴포넌트란, 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수를 말한다.

고차 컴포넌트인 React.memo는 인자로 받은 컴포넌트의 props의 변화를 체크하여 컴포넌트 최적화를 진행한다.

React.memo는 props의 변화를 체크할 때 얕은 비교를 통해 변화를 확인한다.
즉 원시값의 경우 이전과 동일한 값인지 비교하고, 객체, 배열, 함수 등의 참조 타입 값의 경우 이전과 동일한 주소값인지를 비교한다.

React.memo의 인자로 받은 컴포넌트의 props에 변화가 있다면 렌더링을 하고, props에 변화가 없다면 렌더링 하지 않고 기존에 렌더링 된 결과를 재사용한다.

const Profile = ({info}) => {
  return (
    <p>name: {info.name}</p>
    <p>age: {info.age}</p>
  )
}

export default React.memo(Profile);

🤔 각각의 공통점과 차이점에 대해 말해주세요.

공통점

불필요한 리렌더링, 복잡한 계산의 반복 등을 줄이기 위한 용도로, 메모이제이션을 통해 성능 최적화를 하는 것이 그 목적이다.

차이점

React.memo는 고차 컴포넌트로 함수 컴포넌트 뿐만 아니라 클래스 컴포넌트에도 사용 가능하지만 useMemo와 useCallback은 훅으로 함수 컴포넌트에서만 사용할 수 있다.

useMemo는 전달된 함수가 실행되고 반환된 값을 캐싱하지만 useCallback은 전달된 함수 그 자체를 캐싱한다.

🤔 React.memo는 언제 사용하면 좋나요?

React.memo를 사용하기 적합한 상황은

1. 컴포넌트가 같은 props로 자주 렌더링될 때
2. 컴포넌트가 렌더링 될 때마다 복잡한 로직을 수행하는 경우

React.memo는 오직 props 변화에만 의존하는 최적화 방법이다.

만약에 컴포넌트가 useState, useReducer, useContext와 같은 상태 관련 훅을 사용한다면, props의 변화가 없더라도 여전히 state나 context가 변할 때마다 다시 렌더링 될 것이다.

🤔 React.memo의 단점은 없나요?

1. 메모리 소비

React.memo를 잘 사용한다면 렌더링 횟수 감소로 인해 이득을 볼 수 있지만, 무분별한 사용은 오히려 독이 될 수도 있다.

왜냐하면 컴포넌트를 메모이징할 때 렌더링 된 결과를 어딘가에 저장해놓아야 하기 때문에 메모리를 추가적으로 소비하기 때문이다.

만약 props가 계속 변하는 컴포넌트를 React.memo로 감싼다면 불필요한 비교과정만 거칠뿐 렌더링은 반복적으로 발생할 것이다.

2. props에 참조값을 전달할 경우 원하는대로 동작하지 않음

props에 객체, 배열, 함수 등 참조 타입의 값을 전달할 경우 상위 컴포넌트가 호출될 때마다 매번 새로 생성되는 참조값은 매번 새로운 주소값을 가지게 된다. 얕은 비교를 통해 React.memo의 입장에서는 props에 변화가 있다고 판단한다.

따라서 메모이제이션 된 값을 사용하지 않고 렌더링이 다시 발생한다.

import Profile from './Profile';

const App = () => {
  const info = {
    name: 'kim',
    age: 20,
  };

  return (
    <Profile info={info} /> // App이 렌더링 될 때마다 props가 달라짐
  )
};

🤔 useMemo, useCallback, React.memo.. 어떻게 사용하면 좋을까요?

👉 useMemo + React.memo

React.memo로 컴포넌트를 감쌌지만 props에 참조 타입의 값이 전달된 경우 해당 참조값을 useMemo로 감싸서 동일한 참조를 보장한다면 의도한 대로 불필요한 리렌더링을 막을 수 있다.

import { useMemo } from 'react';
import Profile from './Profile';

const App = () => {
  const info = useMemo(() => {
    return { 
			name: 'kim',
	    age: 20,
		};
  }, []);

  return (
    <Profile info={info} />
  )
};

👉 useCallback + React.memo

React.memo로 컴포넌트를 감쌌지만 props에 함수가 전달된 경우 해당 함수를 useCallback으로 감싸서 부모 컴포넌트가 매번 호출될 때마다 함수의 동일한 참조를 보장한다면 불필요한 리렌더링을 막을 수 있다.

import { useCallback } from 'react';
import Profile from './Profile';

const App = () => {
  const sayHi = useCallback(() => {
    console.log('hi');
  }, []);

  return (
    <Profile sayHi={sayHi} />
  )
};

🔎 참고

https://www.youtube.com/watch?v=oqUgcxwrnSY&t=29s