[REACT] 리스트 렌더링: 데이터 배열을 컴포넌트로 변환하기

기본 리스트 렌더링

React 컴포넌트 내에서 배열의 각 항목을 반복하여 렌더링하려면 JavaScript의 map() 함수를 주로 사용합니다. 이 메서드는 배열의 각 요소를 새로운 값(여기서는 JSX 요소)으로 변환한 후, 새로운 배열을 반환합니다.

export default function SubjectList() {
  const subjects = [
    { id: 's1', name: '수학' },
    { id: 's2', name: '과학' },
    { id: 's3', name: '영어' }
  ];

  const subjectItems = subjects.map((subject) => (
    <li key={subject.id} className="subject-item">
      {subject.name}
    </li>
  ));

  return (
    <section>
      <h1>수강 과목</h1>
      <ul>{subjectItems}</ul>
    </section>
  );
}

• subjects 배열을 순회하며 각 과목을 <li> 요소로 변환합니다.

조건에 따른 필터링과 렌더링

때로는 전체 데이터 중에서 특정 조건에 맞는 항목만을 렌더링하고 싶을 때가 있습니다. 이때는 filter() 메서드를 활용하면 손쉽게 조건에 맞는 새로운 배열을 만들 수 있습니다.

export const events = [
  { id: 1, title: '워크숍', date: '2025-03-15', isUpcoming: true },
  { id: 2, title: '컨퍼런스', date: '2025-02-28', isUpcoming: false },
  { id: 3, title: '세미나', date: '2025-04-01', isUpcoming: true },
  { id: 4, title: '네트워킹', date: '2025-01-10', isUpcoming: false },
];

export default function UpcomingEvents() {
  // 현재 날짜 기준으로 예정된 이벤트만 필터링
  const upcomingEvents = events.filter((event) => {
    const eventDate = new Date(event.date);
    return event.isUpcoming && eventDate > new Date();
  });

  const eventItems = upcomingEvents.map((event) => (
    <li key={event.id} className="event-item">
      <strong>{event.title}</strong> - {event.date}
    </li>
  ));

  return (
    <section>
      <h1>다가오는 이벤트</h1>
      <ul>{eventItems}</ul>
    </section>
  );
}

Key Prop의 중요성과 올바른 사용법

리스트 렌더링 시 key prop은 React가 각 요소를 고유하게 식별하는 데 필수적입니다. key는 컴포넌트 간의 변경 사항을 비교하여 최소한의 DOM 업데이트를 수행할 수 있도록 도와줍니다. 중요한 점은 key가 형제 요소들 사이에서만 고유하면 된다는 것이며, key 값은 절대 렌더링 중에 동적으로 생성되어서는 안 됩니다.

const items = ['항목1', '항목2', '항목3'];
const listItems = items.map((item, index) => (
  <li key={index}>{item}</li>
));

• 배열의 순서가 바뀌거나 항목이 추가/삭제되면 index가 변경되어 React가 항목을 잘못 매핑할 수 있습니다.

<li key={Math.random()}>{movie.title}</li>

• 매 렌더링마다 key가 달라져서 React가 이전 항목과 매칭하지 못하고 모든 항목을 새로 생성하게 됩니다.