HJS
AboutPostsProjects

React.memo

React.memo는 **컴포넌트의 불필요한 리렌더링을 방지하는 고차 컴포넌트(HOC, Higher-Order Component)**입니다.
즉, props가 변경되지 않으면 기존 렌더링 결과를 재사용하여 성능을 최적화합니다.


1️⃣ React.memo를 사용하는 이유

🔹 React.memo 사용 에제

🧐 예제1: React.memo 적용 전 (불필요한 렌더링 발생)

import { useState } from "react";

function Child({ count }: { count: number }) {
  console.log("Child 컴포넌트 렌더링!");
  return <p>Count: {count}</p>;
}

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

  return (
    <div>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}

❗ 부모(Parent)가 다시 렌더링되면 모든 자식 컴포넌트도 리렌더링 되어 text 값을 변경해도 Child 컴포넌트가 불필요하게 리렌더링됩니다.


🧐 예제2: React.memo 적용 후 (불필요한 리렌더링 방지)

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

const Child = React.memo(({ count }: { count: number }) => {
  console.log("Child 컴포넌트 렌더링!");
  return <p>Count: {count}</p>;
});

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

  return (
    <div>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}

✔️ text 값을 변경해도 Child 컴포넌트는 리렌더링 되지 않습니다.
✔️ Child 컴포넌트의 props.count가 변경될 때만 다시 렌더링됩니다.

🧐 예제3: React.memo + useCallback (콜백 함수의 변경 감지)

React.memo는 객체, 배열, 함수 타입의 props가 변경되면 다시 렌더링됩니다.
이를 방지하려면 useCallback을 함께 사용해야 합니다.

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

const Child = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log("Child 컴포넌트 렌더링!");
  return <button onClick={onClick}>Click Me</button>;
});

export default function Parent() {
  const [count, setCount] = useState(0);

  // useCallback을 사용하여 함수를 메모이제이션
  const handleClick = useCallback(() => {
    console.log("Button clicked!");
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <Child onClick={handleClick} />
    </div>
  );
}

💡 왜 useCallback이 필요한가?


🔹 React.memo의 한계

📌 props가 변경되지 않아야 효과가 있음

📌 state나 context가 변경되면 영향 받음

📌 렌더링 비용이 낮다면 오히려 성능 저하