[ React ] 시작하기 : 빠르게 시작하기(리스트 렌더링 하기)

리스트 렌더링 하기

컴포넌트 리스트를 렌더링하기 위해서는 for 문 및 map() 함수와 같은 자바스크립트 기능을 사용합니다.

예를 들어 여러 제품이 있다고 가정하겠습니다.

const products = [
    { title: 'Cabbage', id: 1},
    { title: 'Garlic', id: 2 },
    { title: 'Apple', id: 3 },
];

컴포넌트 내에서 map() 함수를 사용하여 제품 배열을 <li> 항목 배열로 변환 합니다.

const listItems = products.map(product =>
    <li key={product.id}>
        {product.title}
    </li>
);

return (
    <ul>{listItems}</ul>
);

<li>에 key 어트리뷰트가 있는 것을 주목하세요.

목록의 각 항목에 대해, 형제 항목 사이에서 해당 항목을 고유하게 식별하는 문자열 또는 숫자를 전달해야 합니다.

React는 나중에 항목을 삽입 ,삭제 또는 재정렬할 때 어떤 일이 일어났는지를 알기 위해 key 를 사용합니다.

// App.js
const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}