[React.js] 메모리제이션을 통해 성능 최적화 하기

React에서는 성능을 최적화하기 위해 React.memo, useCallback, useMemo 라는 세가지 기능 제공합니다. 각각의 기능들은 특정 상황에서 컴포넌트 렌더링을 최적화 하는데 사용됩니다. 세 가지 기능들이 무슨 역할을 하는지와 사용법에 대해 알아보도록 하겠습니다.

 

React.memo

React.memo는 고차컴포넌트로 함수형 컴포넌트에서 불필요한 리렌더링을 방지하는데 사용됩니다.

얕은 비교를 통해 props가 변경이 될때에만 해당 컴포넌트를 리렌더링합니다. 즉, props가 변경되지 않으면 리렌더링을 하지 않습니다.

 

예시 코드

const MyComponent = (props) => {
  // 컴포넌트 구현
};

export default React.memo(MyComponent); // React.memo 사용

 

useCallback

useCallback은 함수의 메모이제이션에 사용됩니다. 리액트에서는 컴포넌트가 렌더링 될 때마다 컴포넌트 내부에 있는 함수들을 다시 생성합니다. 이 때 컴포넌트가 렌더링될 때마다 동일한 함수를 생성하는 것을 방지하여 성능을 최적화합니다. 또한 의존성 배열을 통해 의존성 배열에 포함된 변수가 변경될때만 함수를 재생성합니다.

주로 자식 컴포넌트에 콜백 함수를 전달할 때 유용합니다.

 

예시 코드

const MyComponent = ({ a, b }) => {
  const handleClick = useCallback(() => {
    console.log(a, b);
  }, [a, b]);

  return <button onClick={handleClick}>Click me</button>;
};

 

useMemo

useMemo는 특정 계산의 결과 값을 메모이제이션하는 데 사용됩니다. 컴포넌트가 렌더링될 때마다 동일한 계산을 반복하는 것을 방지하여 성능을 최적화합니다. 주로 무거운 계산이나 리소스 집약적인 작업을 캐싱할 때 유용합니다. useCallback과 마찬가지로 의존성 배열을 가집니다.

 

예시 코드

const MyComponent = ({ a, b }) => {
  const expensiveResult = useMemo(() => {
    return computeExpensiveValue(a, b);
  }, [a, b]);

  return <div>{expensiveResult}</div>;
};

 

 

 

요약

• React.memo: 컴포넌트 전체의 리렌더링을 방지합니다. 컴포넌트가 동일한 props를 받을 때 리렌더링을 생략합니다.
• useMemo: 계산된 값을 메모이제이션합니다. 의존성 배열이 변경되지 않으면 이전 계산 결과를 재사용합니다.
• useCallback: 함수를 메모이제이션합니다. 의존성 배열이 변경되지 않으면 이전 함수를 재사용합니다.

이 세 가지 기능을 적절히 사용하면 React 애플리케이션의 성능을 크게 향상시킬 수 있습니다만 무분별하게 사용시 메모리의 사용량이 증가할 수 있습니다. 그래서 세 가지 기능을 사용하려고 할 때, 이점과 비용을 신중하게 고려하고 사용하여야 합니다.