리액트 공식문서 읽기 - 목록 렌더링

목록 렌더링 * 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 => {product.title} ); return ( {listItems} ); } 참고 링크: https://react-ko.dev/learn#conditional-rendering