[React] export default 컴포넌트와 React.memo(컴포넌트)의 차이점

 

 

기본형

export default ApprovalDocumentDashboard;

✔ 항상 컴포넌트가 부모가 리렌더링되면 자식도 같이 리렌더링
✔ 최적화가 필요하지 않거나 props가 자주 바뀌는 경우 적절

 

memo 사용형

export default React.memo(ApprovalDocumentDashboard);

 

✔ React.memo로 감싸서 props가 바뀌지 않으면 리렌더링을 하지 않도록 최적화
✔ React.memo는 함수형 컴포넌트 전용 최적화 도구
✔ props가 이전과 같다면 React가 이전 렌더링 결과를 재사용
✔ 단, props가 객체일 경우 얕은 비교(shallow compare)만 하므로 깊은 객체는 주의

 

// 기본형
const ApprovalDocumentDashboard = () => {
  // 컴포넌트 내용
};

export default ApprovalDocumentDashboard;

// use.memo 사용형
const ApprovalDocumentDashboard = () => {
  // 컴포넌트 내용
};

export default React.memo(ApprovalDocumentDashboard);

 

 

✅ React.memo가 유용한 경우 ex)Child 컴포넌트는 props로 받은 값이 바뀌지 않으면 굳이 다시 렌더링할 필요가 없는 경우

// Parent.jsx
import React, { useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [count, setCount] = useState(0);
  const user = { name: "Alice" }; // 항상 같은 값

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <Child user={user} />
    </div>
  );
};

export default Parent;


// Child.jsx
import React from "react";

const Child = ({ user }) => {
  console.log("Child rendered");
  return <div>{user.name}</div>;
};

export default React.memo(Child);

👉 버튼을 클릭해도 Child는 렌더링되지 않음 (props가 바뀌지 않았기 때문)
👉 React.memo 덕분에 성능 최적화

 

 

❌ React.memo가 불필요한 경우
✔ 컴포넌트 자체가 매우 가볍고 리렌더링 비용이 적음
✔ 항상 props가 바뀌는 구조
✔ 부모 컴포넌트가 자주 안 바뀜

=> 이럴 땐 React.memo는 오히려 오버헤드만 생기고 이점 없음