5강 고객 컴포넌트 구조화하기

• 한명의 고객이 담고 있는 정보가 많을때는 How??

→ 계층적으로 구성해서 각각의 Component가 담고 있는 내용들을 분리

ex) Customer → CustomerInfo + Customer

<App.js>

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

const customer = {
  'id' : '1',
  'image' : 'https://placeimg.com/64/64/any',
  'name' : '홍길동',
  'birthday' : '980817',
  'gender' : '남자',
  'job' : '대학생'
} //id, image 추가

class App extends Component {
	render() {
    return (
      <Customer id ={customer.id} image = {customer.image} name = {customer.name} birthday = {customer.birthday} gender = {customer.gender} job = {customer.job} />
    ); //id, image 추가
  }
}

export default App;

여기서 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"/> // 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;

ㄴ단순히 보면 Customer 클래스를 CustomerProfile과 CustomerInfo 두개의 클래스로 나눠서 각각에 틀을 넣어주고 그 두 클래스에서 불러올 항목들(id, birthday 등등)을 불러오는 것으로 구조화한 것임

 

• 컴포넌트는 리액트 요소 실제로 출력될 내용(요소)를 반환하는 형태로 개발되어야 함.

→ 리액트 요소는 JSX라는 문법을 통해서 생성이 됨.

JSX의 특징 중 하나는, 내부요소가 두개 이상일 경우(위에서는 Customer 안에 CustomerProfile, CustomerInfo가 있음) <div> 태그로 감싸서 사용해야 한다.

한번 데이터의 개수를 늘려보자. App.js의 customer 변수를 배열 형태로 바꿈

<App.js>

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

const customers = [
{
  'id' : 1,
  'image' : 'https://placeimg.com/64/64/1',
  'name' : '윤동주',
  'birthday' : '980817',
  'gender' : '남성',
  'job' : '대학생'
},
{
  'id' : 2,
  'image' : 'https://placeimg.com/64/64/2',
  'name' : '짭동주',
  'birthday' : '980815',
  'gender' : '여성',
  'job' : '중학생'
},
{
  'id' : 3,
  'image' : 'https://placeimg.com/64/64/3',
  'name' : '간동주',
  'birthday' : '980819',
  'gender' : '중성',
  'job' : '고등학생'
}

]

class App extends Component {
	render() {
    return (
      <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;

<App.js>

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

const customers = [
{
  'id' : 1,
  'image' : 'https://placeimg.com/64/64/1',
  'name' : '윤동주',
  'birthday' : '980817',
  'gender' : '남성',
  'job' : '대학생'
},
{
  'id' : 2,
  'image' : 'https://placeimg.com/64/64/2',
  'name' : '짭동주',
  'birthday' : '980815',
  'gender' : '여성',
  'job' : '중학생'
},
{
  'id' : 3,
  'image' : 'https://placeimg.com/64/64/3',
  'name' : '간동주',
  'birthday' : '980819',
  'gender' : '중성',
  'job' : '고등학생'
}

]

class App extends Component {
	render() {
    return (
      <div>
        {
        customers.map(c => {
          return (
            <Customer id ={c.id} image ={c.image} name ={c.name} birthday ={c.birthday} gender = {c.gender} job = {c.job} />  //map이라는 기능으로 customers 배열을 c라는 변수로 한 바퀴 돌림. 이때 <div> (여기를 {}로 감싸주어야 함.)</div>
          )
          })
        }
      </div>
    );
  }
}

export default App;

이거 돌리고 나면 실행은 되지만 Error가 하나 뜸.

ㄴ이유: 일반적으로 map을 사용할 때는 key라는 속성을 반드시 넣어 주어야 함.(보통 key에는 각 원소를 구분할 수 있는 키를 사용해야 함. 여기선 id를 키로 두었음.)

<Customer key = {c.id} id ={c.id} image ={c.image} name ={c.name} birthday ={c.birthday} gender = {c.gender} job = {c.job} /> 로 바꿔야 함.

• map 문법의 경우 Python에서의 문법과도 동일함. 즉, JavaScript 공부 이전에 Python이나 C#을 공부해봤다면 다소 익숙할 것.

5강에서...

배운 것: 고객 컴포넌트의 내용을 분리해서 다수의 고객 정보를 화면에 출력해 봄.

배울 것: Material UI를 이용해서 테이블 만들기를 진행할 것임.