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

2. Component Mapping

 

 

데이터 배열을 리액트에서 랜더링할 땐 map을 사용한다.

 

* arr.map(callback, [thisArg])

 

• callback 새로운 배열의 요소를 생성하는 함수
• currentValue 현재 처리되고 있는 요소
• index 현재 처리되고 있는 요소의 index 값
• array 메소드가 불려진 배열
• thisArg (선택항목) callback 함수 내부에서 사용 할 this 값을 설정

 

---

 

• 컴포넌트 매핑

 

class Contact extends React.Component {

 

    render() {

        return (

            /* 하드 코딩 */

            <div>

              <h1>Contacts</h1>

              <div>

                <div>Abet 010-0000-0001</div> /* 반복되는 부분 => 이 부분을 또다른 컴포넌트로 바꾸기*/

                <div>Betty 010-0000-0002</div>

                <div>Charlie 010-0000-0003</div>

                <div>David 010-0000-0004</div>

              </div>

            </div>

        );

    }

 

}

 

 

=> 이렇게!

class ContactInfo extends React.Component { //props 사용

    render() {

        return (

            <div>

                {this.props.contact.name} {this.props.contact.phone}

            </div>

        )

    }

 

};

 

class Contact extends React.Component {

    constructor(props) {

        super(props);

        this.state = { //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 mapToComponents = (data) => { //ES6 문법 사용, 데이터를 파라메터로 받는 함수 작성

            return data.map((contact, i) => { //data를 contact로 받아들이는 것, 그 데이터의 index를 i로 받아들이는 것

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

            })

        }

 

 

/*...생략...*/

 

---

 

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 mapToComponents = (data) => {
            return data.map((contact, i) => {
                return (<ContactInfo contact={contact} key={i}/>);
            })
        }
        
        return (
            <div>
                <h1>Contacts</h1>
                <div>{mapToComponents(this.state.contactData)}</div>       
                </div>
            )
        }
    };
    
}
class App extends React.Component {
    render() {
        return (
            <Contact/>
        );
    }
};

ReactDOM.render(
    <App></App>,
        document.getElementById("root")
    );

 

---

 

• ES6 -> ES5

https://es6console.com/