React 컨포넌트 생성

기본 컴포넌트 생성

React 사용의 핵심은 컴포넌트이다. 표시하는 컴포넌트를 만들고 그것을 통합하여 표시하는 화면을 만든다.

JavaScript 파일 생성

컴포넌트는 기본적으로 JavaScript로 작성한다. 앞전에 기본적으로 생성되는 App 컴포넌트의 구조에 대해 설명하였다. 그 기본 코드를 그대로 재사용해야 비교적 간단히 원래의 컴포넌트를 만들 수 있다.

먼저 어플리케이션의 src 폴더에 MyComponent.js 라는 스크립트 파일을 작성한다. 그리고 아래와 같이 소스 코드를 작성한다. 이것이 이번 만든 샘플 컴포넌트이다.

import React, { Component } from 'react';
 
class MyComponent extends Component {
   
  constructor() {
    super();
    this.msg = "THIS IS MY COMPONENT!";
  }
   
  render() {
    return (
      <h1>{this.msg}</h1>
    );
  }
   
}
 
export default MyComponent;

컴포넌트는 Component 클래스를 상속하여 만든다. 클래스에는 반드시 render 메서드를 준비하고, 그리고 JSX를 사용하여 만든 표시 내용을 return한다. 이 구성 요소 표시가 된다.

그 외에 이번에는 constructor 메소드를 제공하고, 거기서 표시할 메시지의 초기화를 할 수 있도록 하고 있다. 기본적인 컴포넌트 클래스의 구조를 알게 있으면, 그렇게 어려운 일이 아닐 것이다.

값을 출력하기

여기에서는 미리 준비해 놓은 값을 컴포넌트에 포함시켜 표시하고 있다. 컴포넌트에서 표시하는 값은 다음과 같이 준비하고 있다.

this.msg = "THIS IS MY COMPONENT!";

컴포넌트에는 this 속성으로 준비해 두는 것이 기본이다. 그리고 이 값은 다음과 같이 JSX 태그에 포함된다.

<h1>{this.msg}</h1>

{} 괄호를 사용하여, 값을 여기에 출력시킨다. 이 방식을 사용하면, 컴포넌트의 필요한 곳에 값을 넣어 표시를 만들어 갈 수 있다.

컴포넌트 통합

그럼, 만든 MyComponent을 화면에 통합 표시하여 보도록 하자.

샘플로 제공되는 index.js를 열어서 해당 소스 코드를 아래의 목록 아래처럼 수정한다.

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import './index.css';
 
ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

이것으로 MyComponent이 통합된다. Web 브라우저로 표시를 확인해 보면, “THIS IS MY COMPONENT!“라는 텍스트가 표시된다. 이것이 MyComponent의 표시이다.

import의 준비

컴포넌트는 여러 클래스를 임포트해서 가져 와야 한다. React의 기본인 react, react-dom는 반드시 필요하다. 이 밖에 사용하는 컴포넌트를 가져온다. 여기에서는 MyComponent를 가져오고 있다.

컴포넌트 태그

컴포넌트는 render 메소드의 첫번째 인수에 JSX을 이용한 태그로 작성한다. 여기에서는 <MyComponent /> 해당된다. MyComponent 클래스를 정의하고 있을뿐, 이렇게 자신의 태그를 사용할 수 있게 된다.

컴포넌트의 이용에 필요한 것은 이것뿐이다. React의 구성 요소는 매우 간단하다.

컴포넌트에 값 전달

MyComponent에서는 msg라는 속성을 준비하고 그것을 포함하여 표시하고 있다. 컴포넌트에는 값을 준비하여 아주 간단히 할 수 있었다.

컴포넌트에 값을 전달하려면?

그럼 컴포넌트를 사용할 때에 컴포넌트에 값을 전달해서 표시를 수행하려면 어떻게 해야 할까? 즉, index.js으로 ReactDOM.render에서 MyComponent을 표시 할 때에 MyComponent에 필요한 값을 전달하여 표시를 배치할 수 있다.

이것도 비교적 간단히 할 수 있다. 우선 컴포넌트 수정이다. 아래에 MyComponent.js 수정 소스 코드를 올려 두었다. 이것을 참고로 내용을 다시 작성한다.

import React, { Component } from 'react';
 
class MyComponent extends Component {
   
  constructor() {
    super();
  }
   
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
      </div>
    );
  }
   
}
 
export default MyComponent;

여기에서는 다음과 같이 표시를 준비하고 있다.

<h1>{this.props.title}</h1>
<p>{this.props.content}</p>

this의 props라는 속성에서 title과 conent 값을 추출한다. 이 props는 컴포넌트 호출하여 값을 받는 데 사용되는 속성이다. 여기에서 title과 content라는 값을 얻어서 표시하고 있다.

또한 render에서 return하고 있는 내용은 <div> 태그에 정리하고 있다는 점도 중요하다. return 할 수 있는 것은 하나의 태그뿐이다. 여러 태그가 있는 경우는 그 전체를 하나의 태그에 정리해 둘 필요가 있으므로 주의한다. 예를 들어,

 return (
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
    );

이렇게 쓰면 에러가 되어 잘 움직이지 않는다. return하는 것은 항상 하나의 태그뿐이다.

MyComponent에 값을 전달

그럼, 수정한 MyComponent을 이용해 보자. index.js을 아래와 같이 수정한다.

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import './index.css';
 
ReactDOM.render(
  <MyComponent 
    title="My COMPONENT"
    content="이것은, 오리지널 컴포넌트 쌤플입니다." />,
  document.getElementById('root')
);

Web 브라우저에서 제목과 메시지가 나타낼 수 있다.

여기에서는 render의 첫번째 인자로 <MyComponent />를 지정하고 있지만, 이 태그 안에 다음과 같이 속성이 추가되어 있다.

<MyComponent title="OO" content="OO"/>

이 title과 content라는 속성이 MyComponent.js의 this.props 안에 title과 content라는 속성으로 추가되어 있었다. 이러한 컴포넌트의 태그를 사용하는 측에서는, this.props에 준비하는 속성을 컴포넌트 태그의 속성으로 제공함으로써 값을 전달할 수 있다.