(React & Express 를 이용한 웹 어플리케이션 개발하기) 2일자 - map

 

   // Contact 템플릿
   class ContactInfo extends React.Component{
     render(){
       return(
         <div> {/* props의 오브젝트 값을 사용한다.*/}
              {this.props.contact.name} {this.props.contact.phone}
          </div>
       );
     }
   }
   
   // Contact 데이터 생성
   class Contact extends React.Component{
     
     constructor(props){
       super(props);

       // state.contactData 배열 선언
       this.state = {
         contactData:[
           {name:'Abet', phone:'010-0000-0001'},
           {name:'Betty', phone:'010-0000-0002'},
           {name:'Charlie', phone:'010-0000-0003'},
           {name:'David', phone:'010-0000-0004'}
         ]
       }
     }

     
     render(){
          // ES6의 애로우 문법
          const mapToComponent = (data) => {

               // map 메소드는 내부의 콜백함수로 새로운 배열로 만들어낸다.
               // map 메소드 contact = currentValue, i = index, array = 배열
               return data.map((contact, i, array) => {
                    // {name:'Abet', phone:'010-0000-0001'} ...
                    return (<ContactInfo contact={contact} key={i}/>);
               })
          };
          
          return(
               <div>
                    { 
                         /* mapToComponent에 배열 파라미터를 주입하여 새로운 배열을 만들어낸다. */
                         mapToComponent(this.state.contactData)
                    }
               </div>
          );
     }
   }
   
   class App extends React.Component{
     render(){
       return(
         <Contact/>
       );
     }
   };
   
   // 실제 페이지에 JSX 코드를 렌더링 하기 위해 사용됨
   ReactDOM.render(<App/>, document.getElementById('root'));

Component를 사용하여 JSX 코드를 자동생성하여 렌더링한다.

이 코드는 템플릿과 같은 Component를 만들어 props 값만 사용하도록 하고

템플릿을 사용하는 Component에 값만 주입하여 JSX코드를 생성하도록 해준다.

 

JS의 map 메소드를 사용하면 해당 배열을 함수 인자로 받아 새로운 배열로 반환하여 생성된다.