memo

 

🎯 memo란 무엇인가요?

**memo**는 React에서 컴포넌트를 다시 렌더링하지 않도록 메모(기억)해 두는 기능이에요.
쉽게 말해서, 불필요한 렌더링을 방지해서 성능을 최적화해주는 도구라고 생각하면 돼요.

 

🍕 비유로 이해하기: 피자 배달원 이야기

여러분이 피자 배달원이라고 상상해 보세요. 🍕

1. 기본 React 컴포넌트 (메모가 없는 경우)
   • 매일 같은 아파트에 피자를 배달하는데, 그 집에 어떤 피자를 주문했는지 매번 물어본다고 생각해 보세요.
   • "어떤 피자 주문하셨죠?" → "마르게리타요!"
   • 비효율적이죠? 똑같은 걸 물어보고 일을 더 많이 하는 셈이에요.
2. React.memo (메모가 있는 경우)
   • "지난번에도 마르게리타 피자를 주문했으니까 이번에도 똑같을 거야"라고 **기억(메모)**해 두면 됩니다.
   • 주문이 달라지지 않았다면 다시 물어볼 필요가 없어요!

React의 **memo**도 마찬가지예요.
컴포넌트의 props(주문)가 바뀌지 않았다면, 다시 렌더링하지 않고 이전 결과를 기억해둡니다.

 

🛠️ React.memo 사용법

memo를 사용하면 컴포넌트가 불필요하게 다시 렌더링되는 것을 막아줍니다.
한번 예제를 볼게요!

 

1. 기본 예제

기본 컴포넌트

import React from 'react';

function MyComponent({ name }) {
  console.log('MyComponent 렌더링'); // 렌더링 확인용
  return <p>안녕하세요, {name}님!</p>;
}

export default MyComponent;

 

부모 컴포넌트

import React, { useState } from 'react';
import MyComponent from './MyComponent';

function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>카운트: {count}</h1>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
      <MyComponent name="홍길동" />
    </div>
  );
}

export default ParentComponent;

🔍 이 코드의 문제점

• 버튼을 클릭하면 count가 바뀌면서 **ParentComponent**가 다시 렌더링됩니다.
• **MyComponent**의 name은 바뀌지 않았지만, 부모가 다시 렌더링되면서 MyComponent도 불필요하게 다시 렌더링됩니다.

 

2. React.memo로 최적화하기

이제 React.memo를 사용해서 MyComponent가 불필요하게 렌더링되지 않도록 막아봅시다.

 

React.memo 적용

import React from 'react';

// React.memo를 사용해서 MyComponent를 메모이제이션
const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('MyComponent 렌더링'); // 렌더링 확인용
  return <p>안녕하세요, {name}님!</p>;
});

export default MyComponent;

3. 최적화된 결과

• count가 증가할 때 **ParentComponent**만 다시 렌더링됩니다.
• MyComponent의 name이 바뀌지 않았으므로 MyComponent는 다시 렌더링되지 않습니다.
• 콘솔에 **MyComponent 렌더링**이 더 이상 출력되지 않는 걸 확인할 수 있어요. 🎉

 

🚀 React.memo의 동작 원리

React.memo는 props가 변경되지 않으면 컴포넌트를 다시 렌더링하지 않습니다.

• **"props가 이전과 같은 값인지 확인하고 같으면 재사용"**하는 원리예요.

 

🌟 React.memo를 사용하면 좋은 상황

1. 큰 컴포넌트
   • 컴포넌트가 크고 복잡할수록 렌더링 비용이 높아집니다.
   • memo를 사용하면 성능을 크게 개선할 수 있어요.
2. 변경되지 않는 props
   • 부모 컴포넌트가 리렌더링되더라도 props 값이 바뀌지 않는 경우에 사용하면 좋습니다.
3. 자주 렌더링되는 컴포넌트
   • 빈번하게 렌더링되는 컴포넌트에 memo를 적용하면 불필요한 렌더링을 줄일 수 있습니다.

 

⚠️ 주의할 점

1. props가 자주 바뀌면 memo의 효과가 없어요.
   • React.memo는 props가 바뀌지 않는 경우에만 효과적입니다.
2. 객체나 함수 props
   • 객체나 함수를 props로 전달하면 참조값이 매번 달라지기 때문에 memo가 렌더링을 막지 못할 수 있어요.
   • 이럴 땐 useMemo나 useCallback을 함께 사용하면 좋아요.

 

🎉 한 줄 요약

**React.memo**는 컴포넌트의 props가 바뀌지 않으면 렌더링을 건너뛰어서 성능을 최적화해주는 기능이에요.

 

 

😊 마무리

React.memo는 컴포넌트를 기억해서 불필요한 렌더링을 막아주는 똑똑한 도구예요!
특히 큰 프로젝트나 성능 최적화가 필요할 때 아주 유용합니다.