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 요소를 작성해도 되고, 컴포넌트를 사용해도 됩니다.