[React] 데이터 배열을 컴포넌트 배열로 변환하기

기존 배열에 있는 값들을 제곱하여 새로운 배열을 생성했는데, 똑같은 원리로 기존 배열로 컴포넌트로 구성된 배열을 생성할 수도 있다.

• IterationSample.jsx
  아까 만든 IterationSample 컴포넌트를 수정한다.

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

• App 컴포넌트에서 예제 컴포넌트 렌더링
  App 컴포넌트에서 기존 코드를 지우고, IterationSample 컴포넌트를 불러와 렌더링한다.

// App.jsx
import React, { Component } from 'react';
import IterationSample from './IterationSample';
 
class App extends Component {
  render() {
    return (
      <IterationSample/>
    );
  }
}
 
export default App;

원하는 대로 렌더링되었으나 아직 완벽하진 않음. 크롬 개발자 도구의 콘솔을 한번 열어보자.

"key" prop이 없다는 경고 메시지가 표시됐는데, key란 무엇일까?