React Component 동적 생성

React Component를 동적으로 생성하기 위한 방법을 생각한다.

다음 코드를 참조하여 작성해 본다.

import React from 'react'

class MapExample extends React.Component{

    render(){
      const dummyArray = ['one', 'two', 'three', 'four', 'five'];
        return(
          <ul>
            {dummyArray.map((value, index) => {
              return <li key={index}>{value}</li>
            })}
          </ul>
        )
    }
    
}

export default MapExample; 

배열을 가져와서 map하는 상기 코드는 동작한다.

다음과 같은 방식으로 state에 있는 array를 가져와 동적으로 Component를 만들 수 있게 되었다.

render(){
        return <div id= 'RegionSelectorWrapper' className = {this.state.styleName}>
            {
                this.state.regions.map((item, index) => {
                    return <span key = {index}>{item}</span>;
                })
            }
        </div>
    }