6.2.1 컴포넌트 수정하기

    조금 전에 만들었던 IterationSample 컴포넌트를 다음과 같이 수정해 보세요.

    IterationSample.js

    import React from 'react';
     
    const IterationSample = () => {
      const names = ['눈사람', '얼음', '', '바람'];
      const nameList = names.map(name => <li>{name}</li>);
      return <ul>{nameList}</ul>;
    };
     
    export default IterationSample;

     

    문자열로 구성된 배열을 선언합니다. 그 배열 값을 사용하여 <li>…</li> JSX 코드로 된 배열을 새로 생성한 후 nameList에 담습니다.

    map 함수에서 JSX를 작성할 때는 앞서 다룬 예제처럼 DOM 요소를 작성해도 되고, 컴포넌트를 사용해도 됩니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.