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의 구성 요소는 매우 간단하다.