목록 렌더링

• for loop, map() 함수와 같은 기능을 사용해 목록을 렌더링 할 수 있음

• 컴포넌트 내에서 map() 함수를 사용해 상품 목록을 li 항목 배열로 변환

• li의 key 속성은 목록 중 각 항목을 식별하는 숫자나 문자열을 전달

• li의 key 속성은 일반적으로 데이터베이스 ID 같은 데이터임

• li의 key 속성은 데이터를 삽입, 삭제, 재정렬할 때 씀

  
  

const products = [

{ title: 'Carrot' isFruit:false, id: 1 },

{ title: 'Ginger', isFreuit:false, id: 2 },

{ title: 'Orange', isFruit:true, id: 3 },

];

export default function shopList() {

const listItems = products.map( products =>

<li

key={product.id}

styled={{

color: product.isFruit ? 'pink': 'navy'

}}

>

{product.title}

</li>

);

return (

<ul>{listItems}</ul>

);

}

참고

링크: https://react-ko.dev/learn#conditional-rendering