class ContactInfo extends React.Component {
  render(){
    return (
      <div>{this.props.contact.name} {this.props.contact.phone}</div>  
    );
  }
};
class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contactData : [
        {name : 'jeewoo', phone : '1234'},
        {name : 'jeesoo', phone : '5678'},
        {name : 'jeewon', phone : '8765'},
        {name : 'jeejee', phone : '4321'}
      ]
    }
  }
  render(){
    //Callback Function
    const mapToComponent = (data) => {
      //map()을 이용하여 contact를 넘김 -> 배열내 각 요소 처리
      return data.map((contact,i)=>{
        return (<ContactInfo contact={contact} key={i}/>);  
      });
    };
    return (
      //mapToComponent Function 호출
      <div>{mapToComponent(this.state.contactData)}</div>
    );
  }
};
class App extends React.Component {
  render() {
    return (
      <Contact />
    );
  }
};

ReactDOM.render(
  <App></App>,
  document.getElementById("root")
);