[React] JSX에 map을 이용하여 값 반복 출력

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

React의 JSX 내부에선 for 구문을 이용할 수 없었다.

그렇다면 반복적으로 처리해야 하는 태그는 일일이 다 쳐줘야 하는 것일까?

여기서 사용하는 함수인 map이 존재한다.

 

문제

동물 3마리를 담는 배열 arr이 존재한다고 하자.

이 동물들을 웹에서 항목 표시(<li>)로 출력하고자 한다.

단, <li> 태그를 여러 번 입력하는 것이 아닌 반복 처리를 하여 출력시켜야 한다.

 

사용하는 방법은 간단하다.

배열.map( (value, key) => 처리문 )

 

let arr = ['호랑이', '코끼리', '독수리']
let brr = arr.map((value, key) => <li key = {key}>{value}</li>);

 

인자는 해당 배열의 Key와 Value를 받아온다.

처리문에서 사용할 문법을 작성하면 JSX에서 반복 처리가 가능하다.

 

전체 코드

import React, { Component } from 'react';

class App extends Component {

  //JSX에 <li>를 여러번 적지않기 위해 다음과 같이 처리한다.
  //각 <li> tag는 고유한 key를 설정해줘야 한다.
  render() {
    let arr = ['호랑이', '코끼리', '독수리']
    let brr = arr.map((value, key) => <li key = {key}>{value}</li>);

    return (
      <div>
        <ul>
          {/* 리스트 생성 */}
          {brr}
        </ul>
      </div>
    );
  }
}
export default App;