React에서 memoization 이해하기

 

React 애플리케이션을 개발하면서 성능 최적화는 중요한 과제 중 하나입니다. 특히 불필요한 렌더링을 최소화하는 것은 성능 향상에 큰 도움이 됩니다. React는 이러한 최적화를 위해 memoization이라는 강력한 개념을 제공합니다. 이번 글에서는 React에서 memoization이 무엇인지, 어떻게 동작하는지, 그리고 실무에서 어떻게 활용할 수 있는지에 대해 알아보겠습니다.

---

1. Memoization이란 무엇인가?

Memoization은 이전에 계산된 값을 저장하여 동일한 입력값에 대해 다시 계산하지 않도록 하는 기술입니다. 이는 성능을 최적화하는 데 유용하며, React에서는 컴포넌트나 함수의 재렌더링을 방지하는 데 활용됩니다.

예를 들어, 복잡한 연산을 수행하는 함수가 있을 때, 같은 입력값으로 함수가 호출된다면 이전에 계산된 결과를 반환함으로써 불필요한 연산을 피할 수 있습니다. React에서는 React.memo, useMemo, useCallback 같은 도구를 통해 이 개념을 구현합니다.

---

2. React.memo

React.memo는 함수형 컴포넌트를 메모이제이션하여 불필요한 렌더링을 방지합니다. React.memo로 감싼 컴포넌트는 props가 변경되지 않는 한 다시 렌더링되지 않습니다.

사용 예시:

import React from 'react';

const ChildComponent = React.memo(({ value }) => {
  console.log('ChildComponent 렌더링');
  return <div>{value}</div>;
});

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <ChildComponent value="Hello, World!" />
    </div>
  );
};

export default ParentComponent;

위 코드에서 ChildComponent는 props인 value가 변경되지 않기 때문에 버튼을 클릭해도 다시 렌더링되지 않습니다. 이를 통해 불필요한 렌더링을 방지할 수 있습니다.

---

3. useMemo

useMemo는 계산량이 많은 연산의 결과를 메모이제이션합니다. 컴포넌트가 렌더링될 때마다 동일한 연산이 반복되지 않도록 해줍니다.

사용 예시:

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

const ExpensiveCalculation = ({ num }) => {
  const calculate = (n) => {
    console.log('복잡한 계산 실행 중...');
    return n * 2;
  };

  const result = useMemo(() => calculate(num), [num]);

  return <div>결과: {result}</div>;
};

const App = () => {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(1);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
      <button onClick={() => setNum(num + 1)}>숫자 증가</button>
      <ExpensiveCalculation num={num} />
    </div>
  );
};

export default App;

위 코드에서 num 값이 변경될 때만 calculate 함수가 실행되며, count가 변경될 때는 실행되지 않습니다. 이를 통해 연산 리소스를 절약할 수 있습니다.

---

4. useCallback

useCallback은 함수의 메모이제이션에 사용됩니다. 함수는 JavaScript에서 참조 타입으로 동작하기 때문에, 컴포넌트가 리렌더링될 때마다 새로운 함수 인스턴스가 생성됩니다. useCallback은 이 문제를 해결하여 필요할 때만 새로운 함수를 생성하도록 합니다.

사용 예시:

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

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent 렌더링');
  return <button onClick={onClick}>클릭</button>;
});

const App = () => {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

export default App;

위 코드에서 handleClick은 useCallback으로 메모이제이션되었기 때문에, App 컴포넌트가 리렌더링되어도 ChildComponent는 다시 렌더링되지 않습니다.

---

5. Memoization 사용 시 주의사항

• 불필요한 메모이제이션 피하기:
  • 메모이제이션은 추가 메모리를 사용하므로, 모든 컴포넌트와 함수에 적용하면 오히려 성능이 저하될 수 있습니다.
  • 성능 최적화가 필요한 경우에만 사용하는 것이 좋습니다.
• 참조 동일성 문제 이해:
  • 메모이제이션된 값이 참조 타입인 경우, 참조 동일성을 잘 관리해야 합니다.
  • 예를 들어, 객체나 배열을 사용하는 경우 불변성을 유지해야 합니다.

---

6. 정리

React에서 memoization은 성능 최적화를 위해 매우 유용한 기술입니다. React.memo, useMemo, useCallback은 각각 컴포넌트, 계산된 값, 함수에 대해 메모이제이션을 제공합니다. 하지만 과도한 사용은 오히려 성능을 저하시킬 수 있으므로, 애플리케이션의 성격에 맞게 신중히 적용해야 합니다.

React 애플리케이션에서 memoization을 적절히 활용하면, 렌더링 성능을 크게 향상시킬 수 있습니다. 이 글에서 소개한 예제와 함께 실제 프로젝트에서 memoization을 적용해 보세요!