useCallback과 useMemo 기초

const memoizedCallback = useCallback(
  () => {
    // 실행될 함수 로직
  },
  [dependency1, dependency2, ...], // 의존성 배열
);

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

// ✅ React.memo로 감싸진 자식 컴포넌트
const ButtonWithMemo = React.memo(({ onClick, label }) => {
  console.log(`ButtonWithMemo [${label}] 렌더링됨`); // 이 로그가 찍히는 시점을 확인!
  return (
    <button onClick={onClick} className="button" style={{ marginRight: '10px' }}>
      {label}
    </button>
  );
});

function UseCallbackDemo() {
  const [parentCount, setParentCount] = useState(0); // 부모 컴포넌트의 상태
  const [childCount, setChildCount] = useState(0);   // 자식 컴포넌트에게 전달될 상태
  const [textInput, setTextInput] = useState('');     // 텍스트 입력 상태

  // 🚨 일반 함수: ParentComponentMemoDemo가 리렌더링될 때마다 재생성됨
  const handleRegularClick = () => {
    setChildCount(prev => prev + 1);
  };

  // ✅ useCallback 적용 (의존성 없음): 캐시된 함수 참조 재사용
  const handleOptimizedClickNoDeps = useCallback(() => {
    setChildCount(prev => prev + 1);
    console.log("Optimized Click (No Deps) executed.");
  }, []); // 의존성 배열이 비어있음

  // ✅ useCallback 적용 (의존성 있음): textInput이 변경될 때만 재생성됨
  const handleOptimizedClickWithDeps = useCallback(() => {
    alert(`Current Text Input: ${textInput}`);
    console.log("Optimized Click (With Deps) executed.");
  }, [textInput]); // textInput이 변경될 때만 함수가 재생성됨

  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>Parent Count: {parentCount}</p>
      <p>Child Count: {childCount}</p>
      <p>Text Input: {textInput}</p>

      <button onClick={() => setParentCount(parentCount + 1)} className="button" style={{ marginBottom: '15px' }}>
        Parent Count 증가 (부모 리렌더링)
      </button>
      <br/>
      <input
        type="text"
        value={textInput}
        onChange={(e) => setTextInput(e.target.value)}
        placeholder="텍스트 입력"
        style={{ width: '100%', padding: '8px', marginBottom: '20px', border: '1px solid #ccc', borderRadius: '4px' }}
      />
      <hr style={{ margin: '20px 0' }}/>

      {/* 1. 일반 함수 프롭스: 부모 리렌더링 시 ButtonWithMemo도 매번 리렌더링됨 */}
      <ButtonWithMemo onClick={handleRegularClick} label="Regular Button" />

      {/* 2. useCallback (의존성 없음) 프롭스: 부모 리렌더링 시 ButtonWithMemo는 리렌더링 안 함 (childCount는 이 버튼의 prop이 아님) */}
      <ButtonWithMemo onClick={handleOptimizedClickNoDeps} label="Optimized Button (No Deps)" />

      {/* 3. useCallback (의존성 있음) 프롭스: textInput 변경 시에만 ButtonWithMemo가 리렌더링됨 */}
      <ButtonWithMemo onClick={handleOptimizedClickWithDeps} label="Optimized Button (With Deps)" />

      <p style={{ marginTop: '20px', fontSize: '0.9em', color: '#555' }}>
        `Parent Count 증가` 버튼을 클릭하면서 콘솔 로그를 확인해보세요.<br/>
        `Regular Button`은 부모가 리렌더링될 때마다 함께 리렌더링되지만,<br/>
        `Optimized Button (No Deps)`는 `handleOptimizedClickNoDeps` 함수 참조가 고정되어 불필요하게 리렌더링되지 않습니다.<br/>
        `Optimized Button (With Deps)`는 `textInput`을 변경할 때만 리렌더링됩니다.
      </p>
    </div>
  );
}

export default UseCallbackDemo;

const memoizedValue = useMemo(
  () => computeExpensiveValue(dep1, dep2),
  [dep1, dep2, ...], // 의존성 배열
);

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

// ✅ React.memo로 감싸진 자식 컴포넌트 (배열 프롭스를 받음)
const ItemList = React.memo(({ items }) => {
  console.log('ItemList 렌더링됨'); // 이 로그가 찍히는 시점을 확인!
  return (
    <div style={{ padding: '15px', border: '1px solid #ccc', borderRadius: '5px', marginTop: '15px' }}>
      <h4>아이템 목록 ({items.length}개)</h4>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
});

// 비용이 많이 드는 계산을 시뮬레이션하는 함수
const calculateExpensiveValue = (num) => {
  console.log('비용이 많이 드는 계산 수행됨...');
  let sum = 0;
  for (let i = 0; i < num * 1000000; i++) { // 의도적으로 지연을 만듦
    sum += i;
  }
  return sum;
};

function UseMemoDemo() {
  const [count, setCount] = useState(0); // 다른 상태 변화를 유도하여 리렌더링 테스트
  const [inputValue, setInputValue] = useState(10); // useMemo의 의존성

  // 🚨 useMemo를 사용하지 않으면, count가 변경될 때마다 calculateExpensiveValue가 다시 실행됨
  // const expensiveResult = calculateExpensiveValue(inputValue);

  // ✅ useMemo를 사용하여 inputValue가 변경될 때만 계산 결과를 다시 계산
  const expensiveResult = useMemo(() => {
    return calculateExpensiveValue(inputValue);
  }, [inputValue]); // inputValue가 변경될 때만 다시 계산

  // ✅ useMemo를 사용하여 배열 참조를 고정
  // inputValue만 변경될 때 ItemList가 이전 items 참조를 받을 수 있음
  const itemsArray = useMemo(() => {
    console.log('itemsArray 생성됨'); // 이 로그가 찍히는 시점을 확인!
    return [`Item A - ${count}`, `Item B`, `Item C`]; // count가 바뀌면 의존성이 달라져 새 배열을 계산함
  }, [count]); // count가 변경될 때만 itemsArray가 재생성됨

  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>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)} className="button" style={{ marginBottom: '15px' }}>
        Count 증가 (부모 리렌더링)
      </button>

      <p>Input Value for Expensive Calculation: {inputValue}</p>
      <input
        type="number"
        value={inputValue}
        onChange={(e) => setInputValue(Number(e.target.value))}
        style={{ width: '100%', padding: '8px', marginBottom: '20px', border: '1px solid #ccc', borderRadius: '4px' }}
      />
      <p>Expensive Result: {expensiveResult}</p>

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

      {/* ItemList 컴포넌트: itemsArray가 변경될 때만 리렌더링됨 */}
      <ItemList items={itemsArray} />

      <p style={{ marginTop: '20px', fontSize: '0.9em', color: '#555' }}>
        `Count 증가` 버튼을 클릭하면서 콘솔 로그를 확인해보세요.<br/>
        `비용이 많이 드는 계산 수행됨...` 로그는 `inputValue`가 변경될 때만 찍히고,<br/>
        `itemsArray 생성됨` 로그는 `count`가 변경될 때만 찍힙니다.<br/>
        이를 통해 `ItemList` 컴포넌트의 불필요한 리렌더링도 방지됩니다.
      </p>
    </div>
  );
}

export default UseMemoDemo;

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

type Item = { id: number; name: string };

export default function SearchWithTransition({ items }: { items: Item[] }) {
  const [keyword, setKeyword] = useState('');
  const [filter, setFilter] = useState('');
  const [isPending, startTransition] = useTransition();

  const filteredItems = useMemo(
    () => items.filter((item) => item.name.toLowerCase().includes(filter.toLowerCase())),
    [items, filter],
  );

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const next = e.target.value;
    setKeyword(next); // 입력 반응은 즉시
    startTransition(() => {
      setFilter(next); // 무거운 목록 갱신은 낮은 우선순위
    });
  };

  return (
    <div>
      <input value={keyword} onChange={handleChange} placeholder="검색어 입력" />
      {isPending && <p>목록 갱신 중...</p>}
      <ul>{filteredItems.map((item) => <li key={item.id}>{item.name}</li>)}</ul>
    </div>
  );
}

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

type Item = { id: number; name: string };

export default function SearchWithDeferredValue({ items }: { items: Item[] }) {
  const [keyword, setKeyword] = useState('');
  const deferredKeyword = useDeferredValue(keyword);

  const filteredItems = useMemo(
    () => items.filter((item) => item.name.toLowerCase().includes(deferredKeyword.toLowerCase())),
    [items, deferredKeyword],
  );

  return (
    <div>
      <input value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder="검색어 입력" />
      <ul>{filteredItems.map((item) => <li key={item.id}>{item.name}</li>)}</ul>
    </div>
  );
}

import SearchWithTransition from './components/SearchWithTransition';

const items = [
  { id: 1, name: 'Alpha' },
  { id: 2, name: 'Beta' },
  { id: 3, name: 'Gamma' },
];

export default function App() {
  return <SearchWithTransition items={items} />;
}