4. 반복되는 부분 컴포넌트 매핑

  [ 비슷한 코드를 반복적으로 "렌더링"하는 방법 ]

  

  데이터 배열 처리시

  map() 메서드는 파라미터로 전달된 함수를 통하여 배열 내의 각

  요소를 처리해서 그 결과로 새로운 배열을 생성한다.

  

  arr.map(callback,[thisArg])

  

    callback : 새로운 배열의 요소를 생성하는 함수로서, 다음 세가지 인수를 가진다.

      - currentValue : 현재 처리되고 있는 요소

      - index : 현재 처리되고 있는 요소의 index 값

      - array : 메소드가 불려진 배열

    thisArg(선택항목) : callback 함수 내부에서 사용할 this 값을 설정

    ex) var numbers = [1,2,3,4,5]; // 처음 값 1,2,3,4,5

    var processed = numbers.map(function(num){

      return num*num;

    });

    //processed가 갖고 있는 값 : 1,4,9,16,25

    

    이걸 ES6 문법으로 작성해 보면(arrow function)

    let numbers = [1,2,3,4,5];

    let result = numbers.map((num) => {

      return num * num;

    });

    

    ES6의 arrow 문법 예제)

      - 파라미터 한개인 경우 : let one = a => console.log(a)

      

      이건 )

        var one = function one(a){

          return console.log(a);

        }

        와 같음

        

       - 파라미터가 두개인 경우 : 

            let two = (a,b)=>console.log(a,b);

       - 함수의 내부가 여러줄인 경우

          let three = (c,d)=>{

            console.log(c);

            console.log(d);

          }

       - 파라미터가 없는 경우

          let four = ()=>{

            console.log("no params");

          }

       

*/ // [ react에서 배열을 Component로 매핑 ] // 우선, 반복되는 작업을 직접 수동으로 하는 안좋은 예제 class Contact extends React.Component{ render(){ return( <div> <div>Abet 101-0000-0001</div> <div>Betty 101-0000-0001</div> <div>Charlie 101-0000-0001</div> <div>David 101-0000-0001</div> </div> ); } }; class App extends React.Component{ render(){ return( <Contact/> ); } }; ReactDOM.render(<App/>,document.getElementById("root")); // 반복작업하는 부분을 따로 컴포넌트로 만들어 보자. 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: 'Charlie', phone: '010-0000-0003' }, { name: 'David', phone: '010-0000-0004' } ] } } render() { 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") );