[리액트]고객관리 시스템_컴포넌트

1. 고객 컴포넌트 만들기

src에 components디렉하나 만들어주고 그아래 Customer.js 파일을 만들어준다.

<App.js>

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Customer from "./components/Customer";
 
const customer = {
  name: "들짐승",
  birthday: "112345",
  gender: "남자",
  job: "없음"
};
class App extends Component {
  render() {
    return (
      <Customer
        name={customer.name}
        birthday={customer.birthday}
        gender={customer.gender}
        job={customer.job}
      />
    );
  }
}
 
export default App;
 

<Customer.js>

import React, {Component} from 'react';
 
class Customer extends Component{
    render(){
        return(
            <div>
                <h2>{this.props.name}</h2>
                <p>{this.props.birthday}</p>
                <p>{this.props.gender}</p>
                <p>{this.props.job}</p>
            </div>
        )
    }
}
 
export default Customer;

 

Customer에서는 props로 받는다.

render부분을 보면

여러 태그들이 병렬로 나열돼있어서 <div>태그로 묶어줘야한다.

 

[리액트]props state

[리액트]props state

 

글고 동빈나형님이 개꿀팁 알려주셨는데

class Customer부분을 컨트롤+클릭하면

클래스 정의부로 자동으로 이동한다.

 

2. 고객 컴포넌트 쪼개기

<Customer.js>만 수정한다.

import React, { Component } from "react";
 
class Customer extends Component {
  render() {
    return (
      <div>
        <CustomerProfile
          id={this.props.id}
          name={this.props.name}
        ></CustomerProfile>
        <CustomerInfo
          birthday={this.props.birthday}
          gender={this.props.gender}
          job={this.props.job}
        ></CustomerInfo>
      </div>
    );
  }
}
class CustomerProfile extends Component {
  render() {
    return (
      <div>
        <h2>{this.props.id}</h2>
        <h2>{this.props.name}</h2>
      </div>
    );
  }
}
 
class CustomerInfo extends 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로 나눠서

각각 렌더링한다.

내부에서만 사용되는 클래스니깐 

export할땐 걍 Customer만 해주면된다.

 

3. 데이터 추가하기

<App.js>에 데이터 추가하기

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Customer from "./components/Customer";
 
const customers = [
  {
    id: 1,
    name: "name1",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 2,
    name: "name2",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 3,
    name: "name3",
    birthday: "112345",
    gender: "여자",
    job: "없음"
  }
];
class App extends Component {
  render() {
    return (
      <div>
        {customers.map(c => {
          return (
            <Customer
              id={c.id}
              name={c.name}
              birthday={c.birthday}
              gender={c.gender}
              job={c.job}
            ></Customer>
          );
        })}
      </div>
    );
  }
}
 
export default App;
 

map함수를 사용해서 조진다.

map안에 화살표함수가 있는데 익명함수쓸때 간단히 처리한다고 한다.

https://wayhome25.github.io/javascript/2017/02/23/js-Arrow-functions/

자바스크립트 화살표 함수 · 초보몽키의 개발공부로그

var a = [
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryl­lium"
];

var a2 = a.map(function(s){ return s.length });

var a3 = a.map( s => s.length );