고객 컴포넌트 만들기

Tin9oo·2023년 12월 7일

React web

React와 Node.js를 활용한 고객 관리 시스템 개발 강의

목록 보기

4/18

컴포넌트

고객 컴포넌트를 만들어보겠다.
한명의 고객에 대한 정보를 보여주는 기능이다.

React 라이브러리는 HTML 문서를 효과적으로 보여주기 위한 라이브러리다.
따라서 컴포넌트 개념이 사용된다. 컴포넌트는 웹 문서에서 어떤 내용을 보여주기 위한 기본적인 단위다.

App.js의 App은 웹 프로그램을 화면에 출력하기 위한 컴포넌트다.
이 컴포넌트가 index.html에서 root의 위치에 그려진다.

즉, 웹 문서에서 그려지게 될 최소 단위가 컴포넌트다.

또한, 컴포넌트는 계층적으로 구성가능하다.

App 컴포넌트 안에 다른 여러개의 컴포넌트가 내부적으로 들어갈 수 있다.

고객 컴포넌트 생성

지금부터 만들 컴포넌트는 모두 하나의 공간에 모아놓겠다.
src 폴더 내부에 components 폴더를 생성한다.

components 폴더 내부에 Customer.js 파일을 생성한다.

React에서 하나의 소스코드를 작성할 때는 import와 export가 많이 활용된다.

import: 특정한 라이브러리를 불러오는 것.

React 컴포넌트 라이브러리를 사용하기 위해서 다음의 import 구문으로 불러올 수 있다.

import React from 'react';

이후에 다른 컴포넌트에서 현재 우리가 만들고 있는 Customer 컴포넌트를 사용할 수 있도록 하기 위해서 내보내기(export)를 할 수 있어야한다. (클래스를 내보낸다?)

export default Customer;

위의 두 구문 사이에 Customer 컴포넌트를 정의해야한다.
Customer 클래스는 React의 Component 형태로 작성된 클래스다.
(React의 Component는 일종의 라이브러리이자 클래스다.)
클래스를 상속받아서 하나의 컴포넌트를 정의할 수 있는 것이다.

React의 Component라는 라이브러리에는 render()라는 함수가 포함되어있다.
render()는 항상 수행되는 내용으로써 Customer라는 컴포넌트를 실제 화면에 그리고자 할 때 실제로 그려지는 내용이 render()에 담기게 된다.

class Customer extends React.Component {
  render() {
    return (
      <div>
      	<h2>tin9oo</h2>
      	<p>19990601</p>
      	...
      </div> 
    )
  }
}

이때, render()의 return()에 HTML 구문이 들어가야한다.

App.js에서 사용자 정의 컴포넌트 사용

return 안에서 컴포넌트를 불러온다.
App 컴포넌트 안에 Customer 컴포넌트가 포함된 채로 출력된다.

class App extends Component {
  render() {
    return (
      <Customer/>
    )
  }
}

Customer 클래스를 사용하기 위해서는 Customer 클래스를 import 해줘야한다.

import Customer from './components/Customer';

(이 단계에서 필요하지 않은 import를 제거한다.)

현재까지의 수정 사항을 웹브라우저로 확인 할 수 있다.
정상적으로 컴포넌트가 출력되는 것을 확인한다.

이를 통해 index.html의 root에는 App.js의 App 컴포넌트가 그려지고 App 컴포넌트는 Customer 컴포넌트를 그린다는 사실을 간접적으로 확인할 수 있다.

Props

실제로 React를 이용할 때는 내용을 하드코딩해서 넣지 않는다.
props를 이용해서 출력한다. 말그대로 속성 이라는 의미다.

App이 Customer 컴포넌트를 부를 때 props를 이용해서 데이터를 전달 할 수 있다.

class App extends Component {
  render() {
  	return (
      <Customer
      	name={}
  		birthday={}
		...
      />
    )
  }
}

name, birthday 등의 속성으로 데이터를 넘겨준다.

class 상단에 보낼 데이터를 명시할 수 있다.

const customer = {
  'name': 'tin9oo',
  'birthday': '19990601',
  ...
}

Customer 컴포넌트를 불러옴에 있어서 방금 정의한 값을 props로 전달할 수 있다.

class App extends Component {
  render() {
  	return (
      <Customer
      	name={customer.name}
  		birthday={customer.birthday}
		...
      />
    )
  }
}

이제Customer는 전달받은 props를 이용해서 화면에 출력한다.
props는 기본적으로 React.Component가 포함하는 내용이다. 따라서 this 키워드로 전달받은 데이터를 읽는다.

class Customer extends React.Component {
  render() {
    return (
      <div>
        <h2>{this.props.name}</h2>
        <p>{this.props.birthday}</p>
      	...
      </div> 
    )
  }
}