목록 데이터 표시

4분

React는 JavaScript와 XML/HTML의 조합인 JSX를 기반으로 하므로, HTML을 동적으로 생성하여 JavaScript에 완전히 통합할 수 있습니다.

시나리오

재료 목록을 표시하고, 준비됨으로 표시된 항목을 연결하는 선을 추가하려 합니다. 이를 위해 스타일에 맞는 새 .css 파일을 만들고, 재료 목록을 위한 새 구성 요소를 만듭니다.

새 스타일 만들기

src에 IngredientList.css라는 새 파일을 만듭니다.
다음 코드를 IngredientList.css에 추가합니다.
```
.prepared {
    text-decoration: line-through;
}
```

구성 요소 만들기

HTML은 JSX의 JavaScript와 통합되므로, 논리 및 루프에는 JavaScript를 사용합니다. 배열에 포함된 항목 집합을 표시할 때는 일반적으로 map 함수를 사용합니다. map은 함수 호출의 결과에 따라 항목의 새 배열을 만들도록 설계되었습니다. 순서가 지정된 목록에 제목 목록을 표시하려면 앞에서 배운 map 및 { } 구문을 모두 사용해야 합니다.

src 내에서 IngredientList.jsx라는 새 파일을 만듭니다.

파일에 다음 코드를 추가합니다.

import './IngredientList.css'
import React from 'react';

function IngredientList(props) {
    // Create the list items using map
    const ingredientListItems = props.ingredients.map((ingredient, index) => {
        return (
            // Return the desired HTML for each ingredient
            <li key={index} className={ ingredient.prepared ? 'prepared' : '' }>
                { ingredient.name }
            </li>
        );
    });

    // return the HTML for the component
    // ingredientListItems will be rendered as li elements
    return (
        <ul>
            { ingredientListItems }
        </ul>
    );
}

export default IngredientList;

코드 탐색

먼저 ingredients 목록을 포함하는 문자열의 배열을 만듭니다. 각 재료를 목록 항목으로 표시해야 합니다. map을 이용하여 이를 구현합니다.

앞에서 강조 표시한 것처럼, map 문은 for each 문과 비슷한 방식으로 작동합니다. 배열의 각 항목에 함수를 한 번만 실행합니다. li HTML 요소 컬렉션을 표시해야 하며, 따라서 적절한 JSX를 li 내의 {ingredient}와 함께 반환합니다.

IngredientList를 사용하도록 앱 업데이트

재료 목록을 표시해보겠습니다.

src/app.jsx를 엽니다.

TODO: Import IngredientList 줄 뒤에 다음 코드를 추가합니다.

// TODO: Import IngredientList
import IngredientList from './IngredientList'

TODO: Add IngredientList component 줄 뒤에 다음 JavaScript를 추가합니다.

{/* TODO: Add IngredientList component */}
<IngredientList ingredients={recipe.ingredients} />

결과 표시

모든 파일을 저장합니다. 브라우저가 자동으로 업데이트되어 새 업데이트가 표시됩니다. 재료 목록에서 마지막 두 항목은 준비됨으로 표시되고, 두 항목을 연결하는 선이 있습니다.

Screenshot of list of ingredients.

계속