컴포넌트 매핑을 이용한 'Contact' 만들기

// index.js
ReactDOM.render(
    <App />,
    document.getElementById('root')
);

// App.js
import React from 'react';
import Contact from './Contact';

class App extends React.Component {
    render(){
        return (
            <Contact />
        );
    }
}
export default App;

// Contact.js
import React from 'react';
import ContactInfo from './ContactInfo';

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' }
            ]
        }
    }

    // rendering 내부에 메소드 생성
    render() {
        const mapToComponents = (data) => {
            return data.map( (contact, index) => {
                return (<ContactInfo contact={contact} key={index}/>);
            });
        };
        // mapToComponents() 메소드 사용하기
        return (
            <div>
                <h1>Contacts</h1>
                <div>{mapToComponents(this.state.contactData)}</div>
            </div>
        );
    }
}

export default Contact;

// ContactInfo.js
import React from 'react';

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

export default ContactInfo;