4강 고객 Component 만들기

• Component(컴포넌트) : 웹 문서에서 어떠한 내용을 보여주기 위한 기본적인 단위, 웹 문서에서 그려지게 될 최소 단위

ㄴex) App.js의 App 클래스는 웹 프로그램 그 자체를 화면에 출력하기 위해 Component를 써서 만들어준 것.

Component는 계층적으로 구성될 수 있기 때문에 하나의 Component 안에 다른 여러 개의 Component가 들어갈 수 있음.

src 폴더 안에 components 폴더 생성 후 내부에 Customer.js 이라는 JS 파일 생성.

• React에서 소스코드를 작성할 때 import와 export가 많이 쓰임.

<Customer.js>

import React from 'react'; //React라이브러리를 불러옴

class Customer extends React.Component { //Customer 클래스를 정의함.
    render() { //React의 Component라는 라이브러리에는 render함수가 포함되어 있음.
        return (  //render함수는 출력될 내용을 return 하는 형태로 작성되어야 함.
						<div>
            <h2>윤동주</h2>
            <p>980817</p>
            <p>남자</p>
            <p>대학생</p>
        </div>
				);
    }
}

export default Customer; //Customer 클래스를 내보냄

<App.js>

import React, { Component } from 'react';
import Customer from './components/Customer' //components파일의 Customer.js에서 Customer를 불러옴
import './App.css';

class App extends Component {
	render() {
    return (
      <Customer/> //Customer를 출력함
    );
  }
}

export default App;

위와 같이 두고서 실행하면 성공!

 

만약 위를 계층적으로 만들어서 표현하고 싶다면...

<App.js>

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

const customer = {
  'name' : '홍길동',
  'birthday' : '980817',
  '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 from 'react'; 

class Customer extends React.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;

위와 같이 하면 상대적으로 더 구조화된 코드를 구현해낼 수 있음.

4강에서...

배운 것 : 고객에 대한 컴포넌트를 만들어서 props 개념을 활용하여 고객정보 출력함.