9강. 리스트 렌더링과 key

?1. 이번 강의에서 해결할 문제

게임을 추가할 때마다 GameCard를 복사하면 데이터와 마크업이 섞입니다. 배열 하나를 목록 UI로 변환하고 검색 결과도 실제로 걸러 냅니다.

✓2. 학습 목표

• 배열의 map과 filter로 목록을 만든다.
• 각 항목에 안정적인 key를 제공한다.
• 원본 배열을 변경하지 않고 파생 목록을 계산한다.

◇3. 핵심 개념

map은 데이터 항목을 JSX 항목으로 변환하고, filter는 조건에 맞는 새 배열을 만듭니다. React는 key를 이용해 이전 목록과 다음 목록에서 같은 항목을 식별합니다. 데이터 자체의 고유하고 변하지 않는 id가 가장 좋은 key입니다.

배열 인덱스는 순서가 바뀌거나 삭제되는 목록에서 항목의 state를 엉뚱한 행에 연결할 수 있으므로 피합니다.

</>4. 단계별 코드 예시

파일 경로: game-release-dashboard/src/data/games.ts

export const games = [
  { id: 'star-harbor', title: 'Star Harbor', platform: 'PC' },
  { id: 'tiny-forge', title: 'Tiny Forge', platform: 'Console' },
  { id: 'pixel-courier', title: 'Pixel Courier', platform: 'Mobile' },
];

파일 경로: game-release-dashboard/src/App.tsx

import { useState } from 'react';
import { GameCard } from './components/GameCard';
import { games } from './data/games';

function App() {
  const [query, setQuery] = useState('');
  const visibleGames = games.filter((game) =>
    game.title.toLowerCase().includes(query.trim().toLowerCase()),
  );

  return (
    <main>
      <input
        aria-label="게임 제목 검색"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
      />
      <div className="game-grid">
        {visibleGames.map((game) => (
          <GameCard key={game.id} {...game} releaseDate="출시 예정" />
        ))}
      </div>
      {visibleGames.length === 0 && <p>검색 결과가 없습니다.</p>}
    </main>
  );
}

export default App;

→5. 코드가 동작하는 이유

렌더링할 때 query로 visibleGames를 계산하고 map이 각 객체를 GameCard로 바꿉니다. 펼침 문법은 id를 포함한 속성을 전달하지만 GameCard가 선언한 props만 사용합니다. key는 자식이 받는 일반 prop이 아니라 React가 목록을 비교하는 표식입니다.

!6. 자주 하는 실수와 해결법

• key로 index 사용: 항목의 고유 id를 사용합니다.
• key를 GameCard 내부에 작성: map이 만드는 JSX 요소에 지정합니다.
• sort나 splice로 원본 배열 변경: 복사본이나 filter, map처럼 새 배열을 반환하는 메서드를 사용합니다.
• 대소문자와 공백을 그대로 비교: 양쪽 값을 정규화합니다.

✎7. 직접 실습

게임 객체에 releaseDate와 genre를 추가하고 카드에 표시하세요. 플랫폼 select 값까지 반영해 제목과 플랫폼 조건을 모두 만족하는 게임만 보여 주세요.

?8. 이해 점검 질문 3개

1. map과 filter는 각각 어떤 배열을 반환하나요?
2. key가 렌더링 결과에 직접 보이지 않아도 필요한 이유는 무엇인가요?
3. 목록에서 배열 인덱스를 key로 쓰면 언제 문제가 되나요?

■9. 핵심 요약

데이터 배열은 filter로 고르고 map으로 UI로 바꿉니다. 안정적인 id를 key로 사용하면 React가 항목의 정체성을 올바르게 추적합니다.