React.memo vs useMemo

1. React.memo

• 역할: 컴포넌트 자체의 리렌더링을 방지하기 위해 사용한다.
• 용도: 컴포넌트를 메모이제이션하여, 부모 컴포넌트가 리렌더링되어도 props가 변경되지 않으면 해당 컴포넌트는 리렌더링되지 않음.
• 작동 방식: React는 이전의 props와 새로 전달된 props를 얕은 비교(shallow compare)하여 변경된 부분이 없으면 컴포넌트를 다시 렌더링하지 않는다.

import {useState} from "react";

const MyComponent = React.memo(({ count }) => {
  console.log("Rendering MyComponent");
  return <div>{count}</div>;
});

function App() {
  const [count, setCount] = useState(0);
  const [renderTestCount, setRenderTestCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setRenderTestCount(renderTestCount + 1)}>Test</button>
      <MyComponent count={count} /> 
    </div>
  );
}

renderTestCount가 변경돼도 MyComponent는 리렌더링 되지 않는다.

2. useMemo

• 역할: 값의 계산 결과를 메모이제이션하여 불필요한 재계산을 방지.
• 용도: 컴포넌트 내부에서 비싼 연산이나 의존성에 따라 변하지 않는 계산 결과를 메모이제이션.
• 작동 방식: useMemo는 제공된 함수의 반환 값을 메모이제이션하며, 의존성이 변경될 때만 다시 계산한다.

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

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const expensiveCalculation = useMemo(() => {
    console.log("Performing expensive calculation...");
    return count * 2;
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input onChange={(e) => setText(e.target.value)} value={text} />
      <div>Expensive Calculation Result: {expensiveCalculation}</div>
    </div>
  );
}

text가 변경되어 리렌더링돼도 expensiveCalculation은 재연산 하지 않고 이전 값 사용, count가 변경될때만 재연산

3. 결론

✅ React.Memo는 다음과 같을 때 사용하면 좋다!

1. 부모 컴포넌트가 자주 렌더링되지만, 해당 컴포넌트의 props가 변경되지 않는 경우
2. 렌더링 비용이 큰 컴포넌트 (복잡한 UI, 무거운 연산)

->  컴포넌트 자체의 렌더링 최적화

 

✅ useMemo는 다음과 같을 때 사용하면 좋다!

1. 연산 비용이 큰 경우 (예: 데이터 필터링, 복잡한 계산, 정렬 등)
2. 불필요한 재계산을 방지해야 하는 경우

->  값을 캐싱하여 불필요한 연산 방지