Map() 소개

Map() 메소드 

: 파라미터로 전달된 함수를 통하여 배열 내의 각 요소를 처리해서 그 결과로 새로운 

배열을 만들어 내는 것. 

---

arr.map( callback , [thisArg] );

callback에 들어갈 수 있는 요소들

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

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

array : 메소드가 불려진 배열 

[thisArg] : (option) callback 함수 내부에서 사용할 this 값 설정 

---

** ES6 문법 ** 

Arrow function

let a = (a,b,c) => {

    console.log(a+b+c);

}

이런 식의 구조를 앞으로 많이 쓸 것입니다.

let a = (a,b,c) 는 ES5에서는 var a = function(a,b,c) { ... } 와 동일합니다.

---

이번 내용은 전체 코드를 보면서 하나씩 집고 넘어가겠습니다.

역 추적을 통하여 코드를 분석해 보겠습니다.

우선 값이 보여질 부분은 Contact 클래스에 내용입니다. 이를 App에서 랜더링하고 

ReactDOM 부분은 지금 생략되어 있는데 이 부분에서 App클래스를 랜더링하여 

값을 보여주게 할 것입니다.

그러면 우선 App 클래스에서 랜더링을 Contact 클래스를 하기 때문에 

Contact클래스를 접근해보겠습니다.

Contact 클래스에서는 mapToComponent 메소드를 JSX문법에 따라 (JSX참조)

반환하고 있습니다.

mapToComponent함수의 인자로 Contact 클래스의 state 변수인 contactData 값을 넣어주고 있습니다. 

그러면 이제 Contact클래스의 state 선언 부분을 가도록 하겠습니다.

변동할 값 없이 state 값만을 확인하는 것이기 때문에 constructor 부분으로 가면 됩니다. 

constructor 부분에서는 props가 먼저 수행될 수 있도록 super로 정의해놓았고,

state 변수인 contactData 값을 정의하고 있습니다.

정의한 내용은 name과 phone을 하나의 값으로 가지고 있는 ( JSON 형태 )

배열 형식의 값입니다.

이 배열 형식의 값 contactData가 mapToComponent 함수의 data 값 

즉 , 콜백의 변화할 값으로 들어간 상황입니다. 

흐름에 맞게 data(contactData)는 map() 메소드에 의해 mapping 됩니다.

앞서 설명 드렸듯이, 파라미터로 전달된 함수를 통하여 배열 내의 요소들을 처리해서 새로운 배열을 만들게 될 것입니다. 

즉, name과 phone 배열 내의 각 요소들을 각각 처리해서 새로운 배열로 만들 것입니다.

{ name: 'Abet', phone: '010-0000-0001' }



이 부분을 하나의 배열 요소로 하여 contact에 매핑시키고 i는 key값으로 들어가게 됩니다.

contact 값은 또 다시 ContactInfo의 contact 값 즉, ContactInfo 클래스의 props의 
value인 contact의 값으로 들어가게되고 그 값은 앞서 말한 contact의 요소들이
될 것 입니다.


ContactInfo 클래스로 가게 되면 랜더링 하는 부분에서 반환 값이 
this.props.contact.name 과 this.props.contact.phone 입니다.


즉, 앞서 말한 contact의 요소들과 매핑되어 contact의 name과 contactData 배열의
name, 그리고 contact의 phone과 contactData배열의 phone이 맵핑 되게 될 것이고,
새로운 배열을 만들게 될 것 입니다.


contactData로 Contactinfo 클래스의 props의 각 요소 값들을 변경시켜 하나의 배열을 
만들어내고 이를 랜더링하여 결과적으로 아래와 같은 결과물이 나오게 될 것 입니다.






https://github.com/Haamseongho/React_Study/tree/master/component_mapping

감사합니다.