customer component structured

@@ -2,22 +2,44 @@ import React, { Component } from 'react';
 import './App.css';
 import './App.css';
 import Customer from './components/Customer'
 import Customer from './components/Customer'
 
 
-const customer ={
+const customers =[
+  {
+  'id': 1,
+  'image': 'https://placeimg.com/64/64/any',
   'name': '이혜연',
   'name': '이혜연',
   'birthday': '000416',
   'birthday': '000416',
   'gender': '여자',
   'gender': '여자',
   'job': '대학생'
   'job': '대학생'
-}
+},
+{
+  'id': 2,
+  'image': 'https://placeimg.com/64/64/2',
+  'name': '김다은',
+  'birthday': '000101',
+  'gender': '여자',
+  'job': '재수생'
+},
+{
+  'id': 3,
+  'image': 'https://placeimg.com/64/64/3',
+  'name': '김석희',
+  'birthday': '900103',
+  'gender': '남자',
+  'job': '회사원'
+},
+
+]
 
 
 class App extends Component {
 class App extends Component {
   render() {
   render() {
     return (
     return (
-      <Customer
-        name={customer.name}
-        birthday={customer.birthday}
-        gender={customer.gender}
-        job={customer.job}
-      />
+      <div>
+        {
+          customers.map(c=> { return (<Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />
+            )
+          })
+        }
+      </div>
     );
     );
   }
   }
 }
 }

@@ -4,14 +4,36 @@ class Customer extends React.Component {
     render(){
     render(){
         return(
         return(
             <div>
             <div>
-            <h2>{this.props.name}</h2>
+                <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.birthday}</p>
                 <p>{this.props.gender}</p>
                 <p>{this.props.gender}</p>
                 <p>{this.props.job}</p>
                 <p>{this.props.job}</p>
             </div>
             </div>
-        );
+        )
     }
     }
 
 
+
 }
 }