목록

리엑트의 목록은 여러 개의 유사한 데이터를 반복적으로 렌더링함

기본 구조

• 배열 데이터를 화면에 표시할 때 각 항목을 컴포넌트로 변환하여 렌더링 함 주로 map() 메서드를 사용

function FruitList() {
  const fruits = ['사과', '바나나', '오렌지'];
  
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

key

목록을 렌더링할 때는 각 항목에 고유한 key를 지정해야 리엑트가 어떤 항목이 변경/추가/삭제가 되었는지 쉽게 파악이 가능

function FruitList() {
  const fruit = [
    { id: 1, name: '수박' },
    { id: 2, name: '사과' },
    { id: 3, name: '참외' }
  ];
  
  return (
    <ul>
      {fruits.map(fruit=> (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

• 가능하면 배열 인덱스(index)보다는 고유ID를 key로 사용해야 함
• key는 요소들 사이에서만 고유함