리스트 렌더링 & Key 해부

핵심 개념

배열.map()으로 리스트를 렌더링합니다. 각 요소에 고유한 key prop이 필수입니다. key는 React가 어떤 항목이 변경됐는지 추적하는 데 사용합니다. key를 지우며 리스트 추적 시스템이 어떻게 경고를 발생시키는지 확인하십시오.

코드 분석

REACT📋 코드 (34줄)







const { useState } = React;

  const UNITS = [
    { id: 1, model: 'T-800', threat: 8 },
    { id: 2, model: 'T-1000', threat: 10 },
    { id: 3, model: 'T-X', threat: 9 },
    { id: 4, model: 'T-600', threat: 6 },
  ];

  function UnitList() {
    const [units, setUnits] = useState(UNITS);
    const remove = (id) => setUnits(prev => prev.filter(u => u.id !== id));

    return (
      <div>
        {units.map(unit => (
          <div key={unit.id} style={{display:'flex', justifyContent:'space-between', alignItems:'center', border:'1px solid #1a1a1a', padding:'8px', marginBottom:'4px'}}>
            <span style={{color:'#10b981'}}>{unit.model}</span>
            <span style={{color:'#888', fontSize:'12px'}}>위협도: {unit.threat}</span>
            <button onClick={() => remove(unit.id)} style={{background:'#333', color:'#888', border:'none', padding:'4px 8px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>TERMINATE</button>
          </div>
        ))}
        {units.length === 0 && <div style={{color:'#10b981'}}>ALL UNITS TERMINATED</div>}
      </div>
    );
  }

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

AI 프롬프트

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

Claude

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

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

ChatGPT

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

'리스트 렌더링 & Key'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

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

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

Grok

무료: Grok 4.1 / SuperGrok $30/mo

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

⭐ 이것만 기억하세요

리스트 렌더링 & Key 해부는 이 3가지만 확실히 잡으세요

1.key 없이 리스트를 렌더링하면 React가 항목 순서를 추적하지 못해서 삭제·재정렬 시 엉뚱한 요소가 사라집니다

2.map()으로 배열을 JSX로 변환하며, 각 항목에 고유한 key를 부여해야 React가 변경된 항목만 효율적으로 업데이트합니다

3.다음 챕터에서 클릭·입력 같은 사용자 행동을 처리하는 React 이벤트 시스템을 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 14 / 34

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