더북(TheBook)

6.2.1 예제 컴포넌트 생성

 

src 디렉터리에 IterationSample.js 파일을 만들어 다음 코드를 작성하세요.

IterationSample.js

import React, { Component } from ‘react’;

class IterationSample extends Component {
  render() {
    const names = [눈사람, 얼음, , 바람];
    const nameList = names.map(
      (name) => (<li>{name}</li>)
    );

    return (
      <ul>
        {nameList}
      </ul>
    );
  }
}

export default IterationSample;

 

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

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

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