리스트 렌더링하기
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 35번째.
데이터는 일반적으로 배열 형태로 제공되며, map은 배열을 요소 목록으로 변환합니다:
const fruits = ['Apple', 'Banana', 'Cherry'];
<ul>
{fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
</ul>map은 각 항목마다 화살표 함수를 한 번씩 호출하고 반환된 <li> 요소들을 수집합니다. React는 전체 배열을 렌더링합니다. 데이터에 과일을 추가하면 목록이 자동으로 늘어나며, 마크업은 절대 변경되지 않습니다.
key={fruit} 속성은 각 항목에 고유한 식별성을 부여합니다. 이에 대한 자세한 내용은 다음 레슨에서 다룹니다. 지금은 map에서 return하는 엘리먼트에 항상 고유한 key를 포함하세요.
챌린지
쉬움데이터에서 메뉴를 렌더링하세요.
<ul id="fruit-list">내부에서map을 사용하여 배열의 각 과일마다 하나의<li>를 렌더링하세요.- 각
<li>는 과일의 이름을 표시하고 이를key로 사용합니다.
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.