[ReactJS] 컴포넌트 매핑(Component Mapping)

컴포넌트 매핑 (Component Mapping)

: 비슷한 코드를 반복해서 렌더링할 수 있다.

Component Mapping

- 데이터 배열을 리엑트에서 렌더링할 때는 자바스크립트 내장함수인 map()을 사용한다.

- map() 메소드는 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 처리해서 그 결과로 새로운 배열을 생성한다.

map() 사용문법

arr.map(callback, [thisArg])

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

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

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

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

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

map() 예제 - ES5

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

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

    return num*num;

});

결과 : [1, 4, 9, 16, 25]

위 예제의 ES6 문법 버전

/* ES6 Syntax */

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

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

    return num*num;

})

결과 : [1, 4, 9, 16, 25]

참고 사이트 http://es6console.com/

ES6 코드를 바로 ES5 코드로 변환해주는 사이트다.

ES6 -> ES5 변환 예제

/* ES6 Syntax */

let one = a => console.log(a);

/* ES5 Syntax */

var one = function one(a) {

    return console.log(a);

};

/* ES6 Syntax */

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

/* ES5 Syntax */

var two = function two(a, b) {

    return console.log(a, b);

};

/* ES6 Syntax */

let three = (c, d) => {

    console.log(c);

    console.log(d);

};

/* ES5 Syntax */

var three = function three(c, d) {

    console.log(c);

    console.log(d);

};

/* ES6 Syntax */

let four = () => {

    console.log('no parans');

};

/* ES5 Syntax */

var four = function four() {

    console.log('no parans');

};

컴포넌트 매핑 예제

리엑트에서 똑같은 원리로 배열을 컴포넌트로 매핑할 수 있다.

(줄 1~12) Contact 컴포넌트를 만들고 하드코딩했다.

(줄 17) App 컴포넌트에서 Contact 컴포넌트를 렌더링

Contact 컴포넌트에서 반복되는 부분을 새로운 컴포넌트로 만들어보자

(줄 1~7) ContactInfo라는 새로운 컴포넌트를 만들었다.

(줄 4) props를 사용하여 이름과 번호를 렌더링한다. props를 객체형태로 받아와서 사용할 수 있다.

(줄 10~20) Contact 컴포넌트에 state를 만들어야 한다.

state를 사용할 때는 constructor(생성자) 메소드에서 state를 초기화 해야한다.

contactDate라는 state를 만들었다.

이 state는 배열 형태이고 그 내부에는 데이터 객체가 들어있다.

(줄 23~27) Contact 컴포넌트의 렌더링 함수 내부에 또 다른 함수를 만들었다. arrow 함수를 사용했다.

const : ES6의 새로운 문법이다. 상수를 뜻한다.

mapToComponent라는 함수에서 우리가 받은 데이터를 매핑할 수 있다. 첫 번째 파라미터는 콜백함수다.

이 콜백함수에서는 컴포넌트를 리턴한다.

contact는 data 배열의 각 data를 contact로 받아들이는 것이고 그 데이터의 인덱스를 i로 받아들이는 것이다.

key를 사용하는 이유는 각 데이터의 identity를 주기 위해서이다.

(참고)

/* ES6 Syntax */

const mapToComponent = (data) => {

    return data.map((contact, i) => {

        return(<ContactInfo contact = {contact} key={i}/>)

    });

};

/* ES5 Syntax */

var mapToComponent = function mapToComponent(data) {

    return data.map(function(contact, i) {

        return React.createElement(ContactInfo, { contact: contact, key: i});

    });

};