이 편에서 만드는 파일

bookshelf/src/
├── components/
│   ├── BookList.jsx   (+)
│   └── BookCard.jsx   (변경 없음)
└── App.jsx              (~)

개념 정리

05편은 책 세 권을 <BookCard> 세 개로 하나하나 적었습니다. 책이 6권, 60권이 되면 이 방식은 쓸 수 없습니다. 배열 전체를 순회하며 컴포넌트를 만드는 map과, 그렇게 만든 각 항목을 구분하는 key가 필요합니다.

map으로 배열을 JSX 배열로 바꾼다

map은 배열의 각 원소를 새 값으로 바꿔 같은 길이의 새 배열을 반환합니다. React는 JSX 안에 배열이 오면 그 배열의 각 원소를 순서대로 렌더링합니다.

books.map((book) => <BookCard key={book.id} {...book} />)

이 표현식의 결과는 <BookCard> 엘리먼트로 이루어진 배열입니다. { }로 감싸 JSX 안에 그대로 넣으면 됩니다.

key가 필요한 이유

React는 리스트가 다시 렌더링될 때 이전 리스트와 새 리스트를 비교해 “무엇이 추가·삭제·순서 변경됐는지” 판단합니다(이 과정을 reconciliation이라 부릅니다). key는 각 항목의 고유하고 안정적인 식별자로, 이 비교의 기준이 됩니다.

인덱스를 key로 쓰면 목록 중간에서 항목을 지웠을 때 엉뚱한 카드가 사라진 것처럼 보이거나, 입력 폼처럼 내부 state를 가진 항목이면 state가 다른 항목으로 옮겨 붙는 문제가 생길 수 있습니다. books.seed.json의 각 책은 고유한 id를 가지고 있으므로 항상 이 값을 key로 씁니다.

key는 props가 아니다

key는 React가 리스트 관리 목적으로만 사용하는 특별한 속성입니다. BookCard 안에서 props.key로 읽을 수 없습니다. 카드 안에서 책의 id가 필요하면 id라는 별도 prop으로 다시 넘겨야 합니다.

실습

// src/components/BookList.jsx
import BookCard from './BookCard.jsx';
 
function BookList({ books }) {
  if (books.length === 0) {
    return <p className="empty-state">아직 등록된 책이 없습니다.</p>;
  }
 
  return (
    <div className="book-grid">
      {books.map((book) => (
        <BookCard key={book.id} {...book} />
      ))}
    </div>
  );
}
 
export default BookList;

// src/App.jsx
import BookList from './components/BookList.jsx';
import books from './data/books.seed.json';
 
function App() {
  return (
    <div className="app">
      <h1>내 책장</h1>
      <BookList books={books} />
    </div>
  );
}
 
export default App;

npm run dev

직접 해보기

1. BookList에서 key를 book.id 대신 index(map의 두 번째 매개변수)로 바꿔봅니다. 화면은 똑같이 보이지만, 이후 편(10편)에서 목록 중간 항목을 삭제하면 문제가 드러납니다. 지금은 콘솔에 경고가 없는지만 확인하고 다시 book.id로 되돌립니다.
2. books.seed.json에 새 책 객체 하나를 직접 추가하고 저장한 뒤, 카드가 7장으로 늘어나는지 확인해봅니다.

{books.map((book, index) => (
  <BookCard key={index} {...book} />
))}

자주 하는 실수

확인 문제

참고 자료

• React 공식 - Rendering Lists