React 최종 미션: 풀스택 미니 앱

핵심 개념

지금까지 배운 모든 React 개념이 하나의 미니 앱에 통합됩니다. 컴포넌트 분리, 상태 관리, 이벤트, 데이터 페칭, 최적화까지 모두 활용합니다. 각 기능을 하나씩 제거하며 시스템이 어떻게 붕괴되는지 확인하십시오.

코드 분석

REACT📋 코드 (42줄)







const { useState, useEffect, useCallback, useMemo, memo } = React;

  const UnitCard = memo(({ unit, onToggle }) => (
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', border:`1px solid ${unit.active?'#10b98144':'#1a1a1a'}`, padding:'8px', marginBottom:'4px', transition:'all 0.2s'}}>
      <span style={{color:unit.active?'#10b981':'#333', fontSize:'12px'}}>{unit.model}</span>
      <span style={{color:'#555', fontSize:'11px'}}>위협도:${unit.threat}</span>
      <button onClick={() => onToggle(unit.id)} style={{background:'transparent', border:`1px solid ${unit.active?'#10b981':'#333'}`, color:unit.active?'#10b981':'#333', padding:'2px 8px', cursor:'pointer', fontFamily:'monospace', fontSize:'9px'}}>{unit.active?'ACTIVE':'OFFLINE'}</button>
    </div>
  ));

  function App() {
    const [units, setUnits] = useState([
      {id:1,model:'T-800',threat:8,active:true},
      {id:2,model:'T-1000',threat:10,active:true},
      {id:3,model:'T-X',threat:9,active:false},
    ]);
    const [filter, setFilter] = useState('all');

    const toggle = useCallback(id => setUnits(prev => prev.map(u => u.id===id?{...u,active:!u.active}:u)), []);
    const filtered = useMemo(() => filter==='all'?units:units.filter(u=>u.active===( filter==='active')), [units,filter]);
    const totalThreat = useMemo(() => units.filter(u=>u.active).reduce((s,u)=>s+u.threat,0), [units]);

    return (
      <div>
        <div style={{display:'flex', justifyContent:'space-between', marginBottom:'8px'}}>
          <span style={{color:'#10b981', fontSize:'12px'}}>총 위협도: {totalThreat}</span>
          <div style={{display:'flex', gap:'4px'}}>
            {['all','active','offline'].map(f=><button key={f} onClick={()=>setFilter(f)} style={{background:filter===f?'#10b981':'transparent', color:filter===f?'#080808':'#555', border:'1px solid #333', padding:'2px 8px', cursor:'pointer', fontFamily:'monospace', fontSize:'9px'}}>{f.toUpperCase()}</button>)}
          </div>
        </div>
        {filtered.map(u=><UnitCard key={u.id} unit={u} onToggle={toggle} />)}
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 React '최종 미션' 컴포넌트에서
불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고
최적화 코드로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'최종 미션'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 React '최종 미션' 사용 패턴 전체를 분석하고
번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을
우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React '최종 미션' vs 다른 프레임워크(Vue/Svelte/Solid)의
동일 기능 구현 방식을 솔직하게 비교하고
2026년 트렌드를 알려줘.

⭐ 이것만 기억하세요

React 최종 미션: 풀스택 미니 앱은 이 3가지만 확실히 잡으세요

1.개별 Hook과 패턴을 각각 알아도 실제 앱에서 조합하지 못하면 완성된 서비스를 만들 수 없습니다

2.데이터 페칭 + 전역 상태 + 폼 처리 + 조건부 렌더링을 하나의 앱에 통합하는 것이 React 종합 설계입니다

3.React 트랙을 마쳤습니다 — 다음은 Vue 3 트랙에서 또 다른 컴포넌트 프레임워크의 접근 방식을 배웁니다

💬 이 챕터 질문 보기

REACT · CH.34 — 질문하거나 답변을 확인하세요

→

진행도 34 / 34

← 커리큘럼으로 ← 목록으로 (React)