[React] map 메서드

map메서드를 이용한 컴포넌트 반복생성

 

map 메서드를 사용하기 전에는 화면에 띄울 데이터를 다 적어야 했음. 

  render(){
    return(
      <div id='App'>
        <Person 
        profile={this.state.personList[0].profile}
        name={this.state.personList[0].name}
         age={this.state.personList[0].age} 
         height={this.state.personList[0].height}/>
        <Person 
         profile={this.state.personList[1].profile}
        name={this.state.personList[1].name}
         age={this.state.personList[1].age} 
         height={this.state.personList[1].height}/>
        <Person 
         profile={this.state.personList[2].profile}
        name={this.state.personList[2].name}
         age={this.state.personList[2].age} 
         height={this.state.personList[2].height}/>
      </div>
    )
  }

 

 

map() 메서드를 이용하면 하나의 코드로 몇번이고 화면에 자동으로 출력할 수 있음 .

  render(){
    const result = this.state.personList.map(
      (data) => (<Person profile={data.profile}
                        name={data.name}
                        age={data.age}
                        height={data.height}/>)
    ) 
    return(
      <div id='App'>
        {result}
      </div>
    )
  }

화면 출력해보면 위와 같은 결과를 볼 수 있음. 

 

 

**personList JSON배열

class App extends Component{
  constructor(props){
    super(props)
    this.state={ 
      personList:[ //길이가 3인 JSON배열 
        {profile:lee, name:'이민호',age:20,height:176.6},
        {profile:jeong, name:'정채연', age:21, height:162.4},
        {profile:song, name:'송중기', age:22, height:177.8},
      ]
    }
  }