React & Node.js - 고객관리시스템 개발하기2

App.js

import logo from './logo.svg';
import './App.css';
import { Component } from 'react';
import Customer from './components/Customer';

//실제로 보내고자 하는 데이터 명시하기
const customers =[
  {
    'id':1,
    'image' : 'https://placeimg.com/64/64/1', 
    'name' : '박은실',
    'birthday' : '941122',
    'gender' : '여자',
    'job' : '취준생'
  },
  {
    'id':2,
    'image' : 'https://placeimg.com/64/64/2', 
    'name' : '홍길동',
    'birthday' : '941122',
    'gender' : '여자',
    'job' : '취준생'
  },
  {
    'id':3,
    'image' : 'https://placeimg.com/64/64/3', 
    'name' : '이순신',
    'birthday' : '941122',
    'gender' : '여자',
    'job' : '취준생'
  }
]

class App extends Component{
  render(){
    return(
        <div>
          {
            customers.map(c=>{//map문법@ (파이썬도 문법 똑같다)
              return (<Customer
                key={c.id}//map사용시 각 원소를 구분할 수 있는 key라는 속성을 넣어줘야한다!
                id={c.id}
                image={c.image}
                name={c.name}
                birthday={c.birthday}
                gender={c.gender}
                job={c.job}
              />
              );
            })
          }

        </div>






      // <div>
      //     <Customer
      //       id={customers[0].id}
      //       image={customers[0].image}
      //       name={customers[0].name}
      //       birthday={customers[0].birthday}
      //       gender={customers[0].gender}
      //       job={customers[0].job}
      //     />
      //     <Customer
      //       id={customers[1].id}
      //       image={customers[1].image}
      //       name={customers[1].name}
      //       birthday={customers[1].birthday}
      //       gender={customers[1].gender}
      //       job={customers[1].job}
      //     />
      //     <Customer
      //       id={customers[2].id}
      //       image={customers[2].image}
      //       name={customers[2].name}
      //       birthday={customers[2].birthday}
      //       gender={customers[2].gender}
      //       job={customers[2].job}
      //     />    
      // </div>




    );
  }
}

export default App;

 

src 폴더에 components 하위폴더 생성후 -> Customer.js 파일 만들기

 

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;