리스트 렌더링하기

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에서 반환하는 요소에 고유한 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>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

기초 (Fundamentals)의 모든 레슨

1React 소개

React란 무엇인가요?첫 번째 컴포넌트 단일 부모 규칙 JSX는 HTML이 아닙니다 요약: React 소개

4Props

Props란 무엇인가요?Props 전달하기 두 개의 Props 같은 컴포넌트, 새로운 데이터 Children Prop 요약: Props

7조건문 및 리스트

삼항 연산자 렌더링 &&로 보여주기리스트 렌더링하기Key의 중요성 필터링 후 Map 사용하기 요약: 조건문 및 리스트

2JSX 표현식

중괄호 사용하기 중괄호 안의 연산 속성에서의 중괄호 사용 JSX에서 함수 호출하기 요약: JSX 표현식

5상태와 이벤트

상태(State)란 무엇인가요?클릭 카운터 단계별로 세기 상태로 토글하기 독립적인 상태 요약: 상태와 이벤트

8프로젝트: 프로필 카드

1단계: 카드 구조 2단계: Props를 활용한 카드 3단계: 좋아요 버튼 4단계: 팔로우 토글

3컴포넌트

기본 구성 요소 두 번째 컴포넌트 만들기 컴포넌트 재사용하기 페이지 구성하기 요약: 컴포넌트

6폼과 입력

제어 컴포넌트 입력 입력값 출력하기 글자 수 카운터 지우기 버튼 요약: 폼과 입력