[React] 고객 컴포넌트를 분리하여 다수의 고객 정보 보여주기

폴더 구조

src > App.js

src > components > Customer.js

 

---------------

src > App.js

import React, { Component } from 'react';
import './App.css';
import Customer from './components/Customer.js';

const customers = [
{
  'id': 1,
  'image': 'https://placeimg.com/64/64/1',
  'name': '홍길동',
  'birthday': '12345',
  'gender': '남자',
  'job': '대학생'
},
{
  'id': 2,
  'image': 'https://placeimg.com/64/64/2',
  'name': '이순진',
  'birthday': '999999',
  'gender': '남자',
  'job': '대학생'
},
{
  'id': 3,
  'image': 'https://placeimg.com/64/64/3',
  'name': '유관순',
  'birthday': '111111',
  'gender': '여자',
  'job': '대학생'
}
]

class App extends Component {
  render() {
    return (
      <div>
        {
          customers.map(c => { //c에는 customer이다. 예를들어 홍길동, 예준석, 박지영 처럼
            return (
              <Customer
                id={c.id}
                image={c.image}
                name = {c.name}
                birthday = {c.birthday}
                gender = {c.gender}
                job = {c.job}
            />
            )
          })
        }
      </div>
    );
  }
}

export default App;

 

src > components > Customer.js

import React from 'react';

class Customer extends React.Component {
    render() {
        return (
            <div>
                <CustomerProfile 
                	id={this.props.id} 
                    image={this.props.image} 
                    name={this.props.name}/>
                <CustomerInfo  
                	birthday={this.props.birthday} 
                    gender={this.props.gender} 
                    job={this.props.job}/>
            </div>
        )

    }
}

class CustomerProfile extends React.Component {
    render() {
        return (
            <div>
                <img src={this.props.image} alt="profile"/>
                <h2>{this.props.name}({this.props.id})</h2>
            </div>
        )
    }
}

class CustomerInfo extends React.Component {
    render(){
        return(
            <div>
                <p>{this.props.birthday}</p>
                <p>{this.props.gender}</p>
                <p>{this.props.job}</p> 
            </div>
        )
    }
}

export default Customer;

 

결과