불필요한 리렌더링 이해와 방지

import ParentComponent from './components/MemoExample.js';

export default function App() {
  return <ParentComponent />;
}

import React, { useState } from 'react';

// 같은 프롭스로 인한 부모발 렌더링을 생략할 수 있도록 React.memo 적용
const MemoizedChild = React.memo(function MemoizedChild({ count }) {
  console.log('MemoizedChild 렌더링됨', count); // 이 로그가 찍히는 시점을 확인!
  return <p>Memoized Child Count: {count}</p>;
});

// 자식 컴포넌트: React.memo로 감싸지 않음
const RegularChild = function RegularChild({ name }) {
    console.log('RegularChild 렌더링됨', name); // 이 로그가 찍히는 시점을 확인!
    return <p>Regular Child Name: {name}</p>;
};

function ParentComponent() {
  const [parentCount, setParentCount] = useState(0);
  const [childCount, setChildCount] = useState(0); // MemoizedChild에 전달될 값
  const [regularName, setRegularName] = useState("Alice"); // RegularChild에 전달될 값

  const incrementParent = () => setParentCount(parentCount + 1);
  const incrementChild = () => setChildCount(childCount + 1);
  const changeRegularName = () => setRegularName("Bob"); // 같은 상태 값이면 부모 업데이트가 생략될 수 있음

  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>Parent Count: {parentCount}</p>
      <button onClick={incrementParent} className="button" style={{ marginRight: '10px' }}>
        Parent Count 증가 (일반 자식도 렌더링)
      </button>
      <button onClick={incrementChild} className="button">
        Memoized Child Count 증가 (부모와 자식 렌더링)
      </button>
      <button onClick={changeRegularName} className="button secondary" style={{ marginLeft: '10px' }}>
        Regular Child Name 변경
      </button>

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

      {/* 같은 count 프롭스의 부모발 렌더링은 생략 가능 */}
      <MemoizedChild count={childCount} />

      {/* name이 변경되든 안 되든 ParentComponent 리렌더링 시 항상 리렌더링 */}
      <RegularChild name={regularName} />
    </div>
  );
}

export default ParentComponent;

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

// Memoized 된 자식 컴포넌트 (함수 프롭스를 받음)
const ButtonComponent = React.memo(({ onClick, label }) => {
  console.log(`${label} ButtonComponent 렌더링됨`);
  return <button onClick={onClick} className="button" style={{ marginRight: '10px' }}>{label}</button>;
});

function UseCallbackExample() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('Hello');

  // 🚨 부모 컴포넌트가 렌더링될 때마다 새 함수 참조가 생깁니다.
  const handleIncrementRegular = () => {
    setCount(prevCount => prevCount + 1);
  };

  // ✅ text가 같으면 캐시한 함수 참조를 반환합니다.
  const handleAlertText = useCallback(() => {
    alert(`Current Text: ${text}`);
  }, [text]); // text 변경 시 새 함수 참조를 반환

  // 폼 처리에서 많이 볼 수 있는 패턴:
  // 자식 컴포넌트에 onSubmit 핸들러를 넘길 때, 부모의 상태와 관련 없는 경우
  const handleFormSubmit = useCallback(() => {
    console.log("폼이 제출되었습니다!");
    // 여기에 폼 제출 로직 (API 호출 등)
  }, []); // 의존성 변경이 없으므로 캐시가 유지되는 동안 같은 참조 반환

  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' }}>`useCallback` 예시</h2>
      <p>Count: {count}</p>
      <p>Text: {text}</p>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="텍스트 입력"
        style={{ width: '100%', padding: '8px', marginBottom: '20px', border: '1px solid #ccc', borderRadius: '4px' }}
      />

      <ButtonComponent onClick={handleIncrementRegular} label="Regular Increment" />
      <ButtonComponent onClick={handleAlertText} label="Alert Text (useCallback)" />
      <ButtonComponent onClick={handleFormSubmit} label="Submit Form (useCallback)" />

      <p style={{ marginTop: '20px', fontSize: '0.9em', color: '#555' }}>
        `Regular Increment` 버튼을 클릭할 때마다 `handleIncrementRegular` 함수가 재생성되어<br/>
        `Regular Increment` 버튼 컴포넌트도 함께 리렌더링 되는 것을 콘솔에서 확인해보세요.<br/>
        `Alert Text` 버튼은 `text`가 변경될 때만 리렌더링 됩니다.
      </p>
    </div>
  );
}

export default UseCallbackExample;

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

const allProducts = [
  { id: 1, name: 'Apple', price: 1.0 },
  { id: 2, name: 'Banana', price: 0.5 },
  { id: 3, name: 'Cherry', price: 2.0 },
  { id: 4, name: 'Date', price: 1.5 },
];

// Memoized된 자식 컴포넌트
const ProductList = React.memo(({ products }) => {
  console.log('ProductList 렌더링됨');
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name} - ${product.price}</li>
      ))}
    </ul>
  );
});

function UseMemoExample() {
  const [filterText, setFilterText] = useState('');
  const [count, setCount] = useState(0); // 다른 상태 변화를 유도하여 리렌더링 테스트

  // 🚨 useMemo를 사용하지 않으면, filterText나 count가 변경될 때마다 이 배열이 재생성됨
  // const filteredProducts = allProducts.filter(product =>
  //   product.name.toLowerCase().includes(filterText.toLowerCase())
  // );

  // ✅ useMemo를 사용하여 filterText가 변경될 때만 계산 결과를 재생성
  const filteredProducts = useMemo(() => {
    console.log('filteredProducts 계산됨'); // 이 로그가 찍히는 시점을 확인!
    return allProducts.filter(product =>
      product.name.toLowerCase().includes(filterText.toLowerCase())
    );
  }, [filterText]); // allProducts는 컴포넌트 밖 상수라 새 참조가 되지 않음

  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' }}>`useMemo` 예시</h2>
      <input
        type="text"
        value={filterText}
        onChange={(e) => setFilterText(e.target.value)}
        placeholder="제품 필터링..."
        style={{ width: '100%', padding: '8px', marginBottom: '15px', border: '1px solid #ccc', borderRadius: '4px' }}
      />
      <button onClick={() => setCount(count + 1)} className="button">
        Count 증가 (UseMemoExample 리렌더링) - Current Count: {count}
      </button>

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

      {/* filteredProducts가 변경될 때만 ProductList가 리렌더링됨 */}
      <ProductList products={filteredProducts} />

      <p style={{ marginTop: '20px', fontSize: '0.9em', color: '#555' }}>
        `Count 증가` 버튼을 클릭할 때 `UseMemoExample` 컴포넌트가 리렌더링되지만,<br/>
        `filteredProducts`는 `filterText`가 변경되지 않는 한 다시 계산되지 않고,<br/>
        따라서 `ProductList` 컴포넌트도 불필요하게 리렌더링되지 않습니다.
      </p>
    </div>
  );
}

export default UseMemoExample;