React JSX 이용하여 고객 컴포넌트 여러개 만들기

---

개요

 

이번에는 React의 JSX를 이용하여 고객 컴포넌트를 만드는 것을 해보도록 하겠습니다.

 

---

APP.js

 

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

const customer = [
{
'id' :1,
'image':'https://placeimg.com/64/64/1',
'name':'홍길동',
'birthday':'961222',
'gender':'남자',
'job':'학생'
},
{
  'id' :2,
  'image':'https://placeimg.com/64/64/2',
  'name':'정성현',
  'birthday':'960402',
  'gender':'남자',
  'job':'인턴' 
},
{
'id' :3,
'image':'https://placeimg.com/64/64/3',
'name':'김덕배',
'birthday':'990821',
'gender':'남자',
'job':'장군'
}

]


class App extends Component {
  render() {
    return (
      <div>
      <Customer
      id = {customer[0].id}
      image = {customer[0].image}
      name = {customer[0].name}
      birthday = {customer[0].birthday}
      gender = {customer[0].gender}
      job = {customer[0].job}
      />

      <Customer
      id = {customer[1].id}
      image = {customer[1].image}
      name = {customer[1].name}
      birthday = {customer[1].birthday}
      gender = {customer[1].gender}
      job = {customer[1].job}
      />

      <Customer
      id = {customer[2].id}
      image = {customer[2].image}
      name = {customer[2].name}
      birthday = {customer[2].birthday}
      gender = {customer[2].gender}
      job = {customer[2].job}
      />
      </div>
    );
  }
}

export default App;

 

JSX로만들경우 2개 이상이라면 <div> 태그 안에서 사용하여야 한다.

 

---

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;

 

이렇게 3개의 고객을 만들어 보았는데 이렇게 만 들 경 우 하드코딩이 되므로 반복문을 돌려 간단하게 만들어 준다.

 

---

APP.js

 

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

const customer = [
{
'id' :1,
'image':'https://placeimg.com/64/64/1',
'name':'홍길동',
'birthday':'961222',
'gender':'남자',
'job':'학생'
},
{
  'id' :2,
  'image':'https://placeimg.com/64/64/2',
  'name':'정성현',
  'birthday':'960402',
  'gender':'남자',
  'job':'인턴' 
},
{
'id' :3,
'image':'https://placeimg.com/64/64/3',
'name':'김덕배',
'birthday':'990821',
'gender':'남자',
'job':'장군'
}

]


class App extends Component {
  render() {
    return (
      <div>
        {customer.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} ></Customer>
        })}
      </div>
    );
  }
}

export default App;

 

이렇게 사용하면 확 줄일 수 있다.

여기서 map 함수를 이용하였는데 map 함수는 위의 고객들의 속성을 c를 통해서 mapping 시켜 주는 것을 의미한다.

 

---