React 예제(1) - MoonGyeongHyeon/React_Study GitHub Wiki

React - 예제(1)

컴포넌트 Mapping

데이터 배열을 mapping하여 컴포넌트 배열로 변환할 수 있다.

  • 예제

App.js

import React from 'react';

class App extends React.Component {
    render(){

        return (
                <Contacts/>
        );
    }
}

class Contacts extends React.Component {
    render(){
        return(
            <div>
                <h1>Contacts</h1>
                <ul>
                    <li>Abet 010-0000-0001</li>
                    <li>Betty 010-0000-0002</li>
                    <li>Chalie 010-0000-0003</li>
                    <li>David 010-0000-0003</li>
                </ul>
            </div>
        );
    }
}

export default App;

기존의 코드이다. 한명한명의 정보를 하드코딩하고 있다. 이번엔 App.js 파일 하나만으로 진행하도록 한다.

class ContactInfo extends React.Component {
    render() {
        return(
            <li>{this.props.name} {this.props.phone}</li>
        );
    }
}

먼저, 한명의 데이터를 보여줄 컴포넌트인 ContactInfo 를 만든다.

    render(){
        return(
            <div>
                <h1>Contacts</h1>
                <ul>
                    <ContactInfo name="Abet" phone="010-0000-0001"/>
                    <ContactInfo name="Betty" phone="010-0000-0002"/>
                    <ContactInfo name="Charlie" phone="010-0000-0003"/>
                    <ContactInfo name="David" phone="010-0000-0004"/>
                </ul>
            </div>
        );
    }

위에서 만든 컴포넌트를 이용하는 코드로 수정한다.

    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"}
            ]
        };
    }

전체 데이터를 배열로 만들어 state에 저장시킨다.

    render(){
        return(
            <div>
                <h1>Contacts</h1>
                <ul>
                    {this.state.contactData.map((contact, i) => {
                        return (<ContactInfo name={contact.name}
                                            phone={contact.phone}
                                              key={i} 
                                 />);
                    })}
                </ul>
            </div>
        );
    }

배열을 이용하여 렌더링을 한다.

  • key의 경우, child 컴포넌트에 데이터의 identity를 제공해준다.
⚠️ **GitHub.com Fallback** ⚠️