import ResponsiveApp from './ResponsiveApp';

export default function App() {
  return (
    <div style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px' }}>
      <ResponsiveApp />
    </div>
  );
}

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

export default function App() {
  const [items, setItems] = useState([
    { id: 1, text: '사과' }, { id: 2, text: '바나나' }, { id: 3, text: '포도' }
  ]);
  const [text, setText] = useState(''); // 타이핑을 위한 상태

  // 2. useCallback으로 함수 주소 캐싱
  // 만약 useCallback을 안 쓰면, 타이핑(text 변경)할 때마다 App이 리렌더링되면서
  // handleRemove 함수가 새로 만들어지고 -> HeavyListItem의 props가 바뀐 것으로 인식되어
  // 아이템 수십 개가 모조리 리렌더링되는 대참사가 발생합니다.
  const handleRemove = useCallback((id) => {
    setItems((prevItems) => prevItems.filter(item => item.id !== id));
  }, []); // 의존성이 없으므로 최초 생성된 함수 주소가 끝까지 유지됨

  // 3. useMemo로 무거운 연산 값 캐싱
  const expensiveCalculationCount = useMemo(() => {
    console.log("무거운 연산 수행 중..."); // items가 바뀔 때만 실행됨
    return items.filter(item => item.text.includes('사')).length;
  }, [items]);

  return (
    <div style={{ padding: '2rem', background: '#f8fafc', borderRadius: '8px' }}>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
        placeholder="아무거나 입력해보세요 (타이핑해도 아이템 리렌더링 안됨)"
        style={{ width: '100%', padding: '10px', marginBottom: '20px', borderRadius: '6px', border: '1px solid #cbd5e1' }}
      />
      
      <p style={{ fontWeight: 'bold', color: '#334155' }}>💡 '사' 글자가 포함된 과일 수: {expensiveCalculationCount}</p>

      <div style={{ background: '#fff', borderRadius: '8px', overflow: 'hidden', border: '1px solid #e2e8f0' }}>
        {items.map(item => (
          <HeavyListItem key={item.id} item={item} onRemove={handleRemove} />
        ))}
      </div>
    </div>
  );
}