React 입문 | React 기본적인 구조 | App.js App 컴포넌트

응용 프로그램의 표시 부분은 “컴포넌트(component)“에 의해 이루어진다. 이 소스 코드가 어떻게 되어 있는지 살펴 보자.

기본적으로 App.js라는 스크립트 파일이 준비되어 있으며, 여기에 App이라는 컴포넌트의 코드가 기술되어 있다. 그 내용을 아래에 올려 둔다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

코드의 내용을 정리해 보겠다.

· import 문에 대해

먼저 import 문에서 여러 모듈을 가져올 수 있다. 첫줄에 import React {Component} from 'react';라는 문장이 있는데, 이것이 React의 컴포넌트 관계의 개체를 로드하는 부분이다. 이 후에 아래 두줄은 logo.svg과 App.css를 로드하기 위한 문장이다.

· App 클래스에 대해

여기에서는 App 클래스라는 것이 정의되어 있다. JavaScript에서도 클래스를 만들 수 있다. ES6라는 에디션에서 클래스 정의가 가능하게 되어 있다. (React이 ES6임을 기억하자). 여기에서는 App 클래스를 다음과 같이 정의하고 있다.

class App extends Component {...}

Component 클래스를 상속하여 App 클래스를 생성하고 있다는 것을 알 수 있다. 이 Component라는 것이 컴포넌트의 기반이 되는 클래스이다. 이를 상속하여 컴포넌트로 작동하도록 한다.

· render 메소드에 대해

이 App 클래스에는 render라는 메소드가 하나 포함되어 있다. 이것은 다음과 같이 작성된다.

render () {
    return ...;
}

return으로 반환되는 값이 그대로 렌더링의 내용으로 처리된다. 여기에서는 return하는 값은 다음과 같은 형태로 되어 있다.

return (<div className = "App"> ... 생략 ... </ div);

HTML 태그가 작성되어 있다. 이것이 “JSX ‘라는 것이다. 여기에서 반환되는 태그가 그대로 App 컴포넌트의 표시 내용으로 출력된다.

 

이것으로 React 응용 프로그램의 기본적인 내용을 알게 되었다. “컴포넌트를 정의하고 그것을 통합하여 렌더링 한다"는 것이 React에서 실행하고 있는 전부이다.