[React.js] Component mapping

www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/lecture/4144?tab=curriculum

React & Express 를 이용한 웹 어플리케이션 개발하기 - 인프런

 

html

<div id="root"></div>

 

 

 

JS

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:'Abet', phone:'010-0000-0001'},
        {name:'Betty', phone:'010-0000-0002'},
        {name:'Charite', phone:'010-0000-0003'},
        {name:'David', phone:'010-0000-0004'}
      ]
    }
  }
  render(){
    /* 프로그램이 실행되면서 변할 일이 없는 값을 지정할 때 사용하는 상수
     * const mapToComponent = (data) => {};
     */
    const mapToComponent = (data) => {
      return data.map((contact, i) => {
        return (<ContactInfo contact = {contact} key = {i} />);
      });
    };
     return (
      <div>
        {mapToComponent(this.state.contactData)}
      </div>
    );
  }
}
 
 
class App extends React.Component {
  render() {
    return (
      <Contact/>
    );
  }
};
 
ReactDOM.render(
  <App></App>,
  document.getElementById("root")
);