React.memo 소개

const MemoizedComponent = React.memo(MyComponent);

import React, { useState } from 'react';

// 🌟 React.memo로 감싸진 자식 컴포넌트
const MemoizedDisplay = React.memo(({ title, value, onIncrement }) => {
  console.log(`MemoizedDisplay [${title}] 렌더링됨`); // 렌더링 시점에 로그 출력
  return (
    <div style={{ padding: '10px', margin: '5px', border: '1px solid lightblue', borderRadius: '4px' }}>
      <h3>{title}</h3>
      <p>Value: {value}</p>
      {onIncrement && <button onClick={onIncrement} className="button secondary">Increment Memoized Child</button>}
    </div>
  );
});

// React.memo로 감싸지지 않은 일반 자식 컴포넌트
const RegularDisplay = ({ title, value }) => {
  console.log(`RegularDisplay [${title}] 렌더링됨`); // 렌더링 시점에 로그 출력
  return (
    <div style={{ padding: '10px', margin: '5px', border: '1px solid lightcoral', borderRadius: '4px' }}>
      <h3>{title}</h3>
      <p>Value: {value}</p>
    </div>
  );
};

function ParentComponentMemoDemo() {
  const [appClicks, setAppClicks] = useState(0); // 앱 전체 클릭 수 (다른 상태 변화)
  const [memoizedValue, setMemoizedValue] = useState(0); // MemoizedDisplay에 전달될 값

  // ParentComponent가 리렌더링될 때마다 이 함수는 재생성됨 (새로운 참조)
  const handleMemoizedIncrement = () => {
    setMemoizedValue(prev => prev + 1);
  };

  return (
    <div style={{ maxWidth: '600px', margin: '30px auto', padding: '25px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.05)', backgroundColor: '#fff' }}>
      <h2 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '30px' }}>`React.memo` 활용 예시</h2>
      <p>App Clicks (Parent State): {appClicks}</p>
      <button onClick={() => setAppClicks(appClicks + 1)} className="button">
        App Clicks 증가 (부모 리렌더링)
      </button>

      <hr style={{ margin: '20px 0' }}/>

      {/* 1. MemoizedDisplay: appClicks 변화로 부모 리렌더링 시, memoizedValue가 변경되지 않으면 리렌더링 안 함 */}
      {/* 단, onIncrement 함수가 매번 재생성되므로, 이 경우 MemoizedDisplay는 계속 리렌더링됨! */}
      <MemoizedDisplay 
        title="Memoized Child (with regular function prop)" 
        value={memoizedValue} 
        onIncrement={handleMemoizedIncrement}
      />

      {/* 2. RegularDisplay: 부모 리렌더링 시 항상 리렌더링 */}
      <RegularDisplay 
        title="Regular Child" 
        value={appClicks} 
      />

      <p style={{ marginTop: '20px', fontSize: '0.9em', color: '#555' }}>
        `App Clicks 증가` 버튼을 클릭하면서 콘솔 로그를 확인해보세요.<br/>
        `Regular Child`는 항상 렌더링되지만, 첫 번째 `Memoized Child`는 `handleMemoizedIncrement` 함수가 매번 재생성되기 때문에 프롭스가 변경된 것으로 간주되어 계속 리렌더링됩니다.<br/>
        이 문제를 해결하려면 `useCallback`이 필요합니다.
      </p>
    </div>
  );
}

export default ParentComponentMemoDemo;

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

// React.memo로 감싸진 자식 컴포넌트
const OptimizedDisplay = React.memo(({ title, value, onAction, data }) => {
  console.log(`OptimizedDisplay [${title}] 렌더링됨`);
  return (
    <div style={{ padding: '10px', margin: '5px', border: '1px solid lightgreen', borderRadius: '4px' }}>
      <h3>{title}</h3>
      <p>Value: {value}</p>
      {onAction && <button onClick={onAction} className="button secondary">Perform Action</button>}
      {data && <p>Data items: {data.length}</p>}
    </div>
  );
});

function ParentComponentOptimized() {
  const [appClicks, setAppClicks] = useState(0);
  const [displayValue, setDisplayValue] = useState(0);

  // ✅ useCallback으로 함수 메모이제이션
  // displayValue가 변경될 때만 handleAction 함수가 재생성됨
  const handleAction = useCallback(() => {
    setDisplayValue(prev => prev + 1);
    console.log("Action performed!");
  }, []); // 의존성 배열이 비어있으므로 컴포넌트 마운트 시 한 번만 생성됨.

  // ✅ useMemo로 객체/배열 메모이제이션
  // appClicks가 변경될 때만 dataArray가 재생성됨.
  const dataArray = useMemo(() => {
    console.log("dataArray 계산됨");
    return Array.from({ length: appClicks % 5 + 1 }, (_, i) => `Item ${i}`);
  }, [appClicks]); // appClicks가 변경될 때만 dataArray 재생성

  return (
    <div style={{ maxWidth: '600px', margin: '30px auto', padding: '25px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.05)', backgroundColor: '#fff' }}>
      <h2 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '30px' }}>`React.memo` + `useCallback` + `useMemo`</h2>
      <p>App Clicks (Parent State): {appClicks}</p>
      <button onClick={() => setAppClicks(appClicks + 1)} className="button">
        App Clicks 증가 (부모 리렌더링)
      </button>

      <hr style={{ margin: '20px 0' }}/>
      
      {/* OptimizedDisplay: */}
      {/* value 프롭스가 변경될 때만 리렌더링 (현재는 변경 안 됨) */}
      {/* onAction 프롭스는 useCallback으로 메모이제이션되어 참조가 고정됨 */}
      {/* data 프롭스는 useMemo로 메모이제이션되어 appClicks가 특정 값으로 변경될 때만 재생성됨 */}
      <OptimizedDisplay 
        title="Optimized Child" 
        value={displayValue} 
        onAction={handleAction} 
        data={dataArray}
      />

      <p style={{ marginTop: '20px', fontSize: '0.9em', color: '#555' }}>
        `App Clicks 증가` 버튼을 여러 번 클릭하면서 콘솔 로그를 확인해보세요.<br/>
        `OptimizedDisplay` 컴포넌트와 `dataArray` 계산 로그가 불필요하게 자주 찍히지 않을 것입니다.<br/>
        `Perform Action` 버튼을 클릭해야 `OptimizedDisplay`의 `value`가 변경되어 해당 컴포넌트가 렌더링됩니다.
      </p>
    </div>
  );
}

export default ParentComponentOptimized;

const MyComponent = React.memo((props) => {
  // ...
}, (prevProps, nextProps) => {
  // prevProps와 nextProps를 비교하여 리렌더링 여부 결정
  // 예: 특정 객체 프롭스의 특정 속성만 비교하고 싶을 때
  return prevProps.someValue === nextProps.someValue;
});