린찬승하우스: 16 성능 최적화 기법: React.memo, useCallback, useMemo로 불필요한 렌더링 방지하기

2025년 1월 18일 토요일

16 성능 최적화 기법: React.memo, useCallback, useMemo로 불필요한 렌더링 방지하기

React 애플리케이션에서 성능 최적화는 매우 중요한 작업입니다. 특히, 상태가 복잡하고 컴포넌트가 많아질수록 불필요한 렌더링이 성능에 큰 영향을 미칠 수 있습니다. 이번 글에서는 React.memo, useCallback, useMemo와 같은 기법을 사용하여 성능을 최적화하는 방법을 설명하겠습니다. 이를 통해 불필요한 렌더링을 방지하고, 애플리케이션의 성능을 향상시킬 수 있습니다.

React 성능 최적화, React.memo, useCallback, useMemo, React 렌더링 최적화, React 컴포넌트 최적화,

1. 성능 최적화란?

성능 최적화란 애플리케이션이 빠르고 원활하게 작동하도록 만드는 일련의 과정입니다. React에서는 주로 렌더링 최적화가 핵심이 됩니다. 컴포넌트가 불필요하게 자주 렌더링될 경우 성능 저하를 일으킬 수 있습니다. 이를 방지하기 위해 React.memo, useCallback, useMemo와 같은 도구를 활용할 수 있습니다.

2. React.memo로 컴포넌트 렌더링 최적화하기

React.memo는 컴포넌트의 props가 변경되지 않으면, 해당 컴포넌트를 다시 렌더링하지 않도록 최적화해주는 고차 컴포넌트(HOC)입니다. 이 기법을 사용하면, 부모 컴포넌트가 재렌더링될 때 자식 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지할 수 있습니다.

a. React.memo 기본 사용법


import React from 'react';

// 간단한 컴포넌트
const MyComponent = React.memo(({ value }) => {
  console.log("렌더링 중...");
  return <div>{value}</div>;
});

// 부모 컴포넌트에서 MyComponent 사용
const ParentComponent = () => {
  const [count, setCount] = React.useState(0);
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <MyComponent value={count} />
    </div>
  );
};

위 코드에서 MyComponent는 React.memo로 감싸져 있기 때문에, value props가 변경되지 않으면 부모 컴포넌트가 렌더링되어도 MyComponent는 다시 렌더링되지 않습니다. 이렇게 불필요한 렌더링을 막을 수 있습니다.

b. React.memo의 동작 방식

React.memo는 기본적으로 shallow comparison(얕은 비교)을 통해 props가 변경되었는지 확인합니다. 즉, 객체나 배열의 경우 참조가 변경되었을 때만 재렌더링이 발생합니다.

3. useCallback으로 함수 메모이제이션

React에서 함수는 새로운 렌더링마다 새롭게 생성됩니다. 이로 인해 자식 컴포넌트에 props로 전달된 함수가 변경된 것처럼 보이게 되어 자식 컴포넌트가 불필요하게 렌더링될 수 있습니다. useCallback은 함수를 메모이제이션하여 불필요한 함수 재생성을 방지하는 훅입니다.

a. useCallback 기본 사용법


import React, { useCallback } from 'react';

// 자식 컴포넌트
const ChildComponent = ({ onClick }) => {
  console.log("자식 컴포넌트 렌더링");
  return <button onClick={onClick}>Click me</button>;
};

// 부모 컴포넌트
const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  // useCallback을 사용하여 함수 메모이제이션
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

위 코드에서는 handleClick 함수가 useCallback으로 메모이제이션되었습니다. count가 변경될 때만 새로운 함수가 생성되며, 그 외의 경우에는 기존 함수를 재사용하게 됩니다. 이렇게 함으로써 자식 컴포넌트는 불필요한 렌더링을 피할 수 있습니다.

b. useCallback의 동작 방식

useCallback은 두 번째 인자로 의존성 배열을 받습니다. 이 배열에 포함된 값이 변경되지 않으면, 동일한 함수를 반환합니다. 이 기법을 사용하면 함수가 불필요하게 새로 생성되는 것을 방지할 수 있습니다.

4. useMemo로 값 메모이제이션

useMemo는 계산된 값을 메모이제이션하여, 값이 변경되지 않으면 재계산을 하지 않도록 최적화하는 훅입니다. 복잡한 계산을 포함한 값을 여러 번 계산하지 않도록 방지할 수 있습니다.

a. useMemo 기본 사용법


import React, { useMemo } from 'react';

const ExpensiveComponent = ({ num }) => {
  // useMemo를 사용하여 계산된 값 메모이제이션
  const computedValue = useMemo(() => {
    console.log("값 계산 중...");
    return num * 2; // 예시: 비싼 계산
  }, [num]); // num이 변경될 때만 다시 계산

  return <div>Computed Value: {computedValue}</div>;
};

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ExpensiveComponent num={count} />
    </div>
  );
};

위 코드에서는 useMemo를 사용하여 computedValue가 계산된 결과를 메모이제이션하고 있습니다. num이 변경되지 않는 한, 해당 계산은 재실행되지 않아서 성능이 최적화됩니다.

b. useMemo의 동작 방식

useMemo는 두 번째 인자로 의존성 배열을 받습니다. 의존성 배열에 포함된 값이 변경될 때만 새로운 값을 계산하고, 그 외의 경우에는 이전 계산된 값을 그대로 반환합니다. 이를 통해 불필요한 계산을 방지할 수 있습니다.

5. 성능 최적화 기법을 활용한 성능 향상

React.memo: 불필요한 자식 컴포넌트 렌더링을 방지하여 성능을 최적화합니다.
useCallback: 함수가 재생성되지 않도록 메모이제이션하여 렌더링을 최적화합니다.
useMemo: 계산된 값을 메모이제이션하여 불필요한 재계산을 방지합니다.

이 세 가지 기법은 React 애플리케이션에서 성능을 최적화하는 데 매우 유용하며, 특히 컴포넌트가 많고 상태가 복잡한 경우에 효과적입니다. 이를 활용하여 애플리케이션을 더 빠르고 효율적으로 만들 수 있습니다.

6. 결론

React 애플리케이션에서 성능 최적화는 중요한 작업입니다. React.memo, useCallback, useMemo와 같은 기법을 적절히 사용하면 불필요한 렌더링을 방지하고, 애플리케이션의 성능을 크게 향상시킬 수 있습니다. 초보자라도 이 기법들을 이해하고 적용함으로써 더 나은 성능을 가진 애플리케이션을 만들 수 있습니다. 성능 최적화는 애플리케이션이 커질수록 더 중요해지므로, 이들 기법을 적극적으로 사용해 보시기 바랍니다.

린찬승하우스