React에서 useMemo와 useCallback으로 성능 최적화하기

 

React 앱을 개발하다 보면 컴포넌트가 불필요하게 렌더링되는 상황을 마주하게 됩니다. 이런 경우 useMemo와 useCallback 훅을 사용해 성능을 최적화할 수 있습니다.

1. useMemo란?

useMemo는 계산 비용이 높은 값을 메모이제이션하여, 의존성이 변경될 때만 다시 계산하도록 도와줍니다.

import { useMemo } from 'react';

const expensiveValue = useMemo(() => {
  return computeHeavyTask(input);
}, [input]);

위 코드에서 computeHeavyTask는 input이 바뀔 때만 실행되고, 그 외에는 캐시된 결과를 반환합니다.

2. useCallback이란?

useCallback은 함수를 메모이제이션하는 데 사용됩니다. 주로 하위 컴포넌트에 콜백을 props로 넘길 때, 불필요한 렌더링을 방지할 수 있습니다.

import { useCallback } from 'react';

const handleClick = useCallback(() => {
  console.log('클릭!');
}, []);

handleClick 함수는 의존성 배열이 바뀌지 않는 한 동일한 참조를 유지합니다.

3. 언제 사용해야 할까?

• 비용이 큰 연산을 반복해서 실행하는 경우 useMemo
• 컴포넌트가 props로 함수를 자주 전달하고 React.memo로 감싼 하위 컴포넌트가 있을 때 useCallback

4. 예제: useMemo + useCallback 함께 사용하기

import React, { useState, useMemo, useCallback } from 'react';

function ExpensiveComponent({ onClick }) {
  console.log('ExpensiveComponent 렌더링');
  return <button onClick={onClick}>클릭</button>;
}

const MemoizedComponent = React.memo(ExpensiveComponent);

function App() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(0);

  const doubled = useMemo(() => {
    return value * 2;
  }, [value]);

  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <div>
      <p>value: {value}, doubled: {doubled}</p>
      <button onClick={() => setValue(value + 1)}>값 증가</button>
      <MemoizedComponent onClick={handleClick} />
    </div>
  );
}

5. 마무리

useMemo와 useCallback은 React에서 성능 최적화에 매우 유용한 도구입니다. 하지만 무분별하게 사용하는 것은 오히려 코드 복잡도를 증가시킬 수 있으므로, 렌더링 병목이나 성능 이슈가 명확할 때만 사용하는 것이 좋습니다.