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에 준비하는 속성을 컴포넌트 태그의 속성으로 제공함으로써 값을 전달할 수 있다.



'React' 카테고리의 다른 글

[React] 컨포넌트 생성  (0) 2017.12.31
[React] React 기본적인 구조  (0) 2017.12.31
[React] 개발 준비  (0) 2017.12.31

React는 구성 요소라는 것을 정의하고 화면의 표시까지 구축해 본다. 그 기본적인 구조에 대해 설명한다.


React을 구성하는 3개 파일

생성된 소스 코드를 살펴 보겠다.

응용 프로그램의 프로그램에 대해

메인 프로그램인 'index.js'를 설명한다.. 아래에 소스 코드를 올려 둔다. 내용을 순서대로 설명하겠다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

· import 문에 대해

최초에 import 문이 여러개가 작성되어 있는데, 이는 외부의 모듈을 로드하는 것이다. 이 import 문은 JavaScript에서는 그다지 익숙하지 않을지도 모르지만, 이것은 ES6(ECMAScript 6 Edition)에서 지원되는 기능이다. React에는 "Babel"라는 ES6 대응의 트랜스 컴파일러를 사용하고 있기에 이러한 ES6의 기능을 사용할 수 있다.

최초에 "react", "rect-dom"라는 모듈을 로드하고 있고, 이것들이 React의 본체이다. 또한 다음의 "./App", "./index.css"은 여기에서 사용하는 컴포넌트와 스타일 시트이다. 이 또한 import로 로드한다.

· ReactDOM.render

그 다음에 ReactDOM 객체의 "render"라는 메소드를 실행하고 있다. 이것은 이 프로그램에서 실행하는 유일한 처리이다. 이 컴포넌트를 지정된 위치에 넣어 렌더링을 수행하는 것으로, 다음과 같이 실행한다.

ReactDOM.reder(컴포넌트, 조합 대상 요소);

첫번째 인수는 App.js으로 정의하고 있는 App 컴포넌트를 지정하고 있다. 그리고 두번째 인수는 root라는 ID의 요소를 지정한다. 그러면 App 컴포넌트가 root 태그에 포함된 코드가 렌더링되고 출력된다.

JSX 대해

여기에서는 render 인수에 <App />라는 것이 지정되어 있다. 이 App 컴포넌트의 태그이지만, JavaScript의 인수에 직접 HTML 태그를 작성되어 있어서 이상하게 생각되었을 것이다. 이것은 JSX 라는 기능을 이용한 것이다. 이것은 아마도 "JavaScript Expression"을 약자일 것이다. 이 JSX는 HTML 태그를 그대로 JavaScript 코드 내에 작성할 수 있는 기능이다. 단독 태그가 아니라, 태그 안에 별도의 태그가 포함된 복잡한 것도 처리할 수 있다.

<App />이라는 값을 작성하는 것으로, <App />라는 태그에 정의된 사용자 지정 컴포넌트를 render 에 지정하고 있다.



index.html 탬플릿

이어서 Web 페이지의 템플릿인 "index.html"을 살펴 보자. 아래에 소스 코드를 올려 둔다. 긴 코멘트가 있지만 이것은 생략하였다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      ... 중략 ...
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      ... 중략 ...
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      ... 중략 ...
    -->
  </body>
</html>

이 코드는 그렇게 어렵지는 않다. 몇 가지 설명을 하겠다

· %PUBLIC_URL% 문에 대해

헤더 부분을 보면 <link> 태그에 href="%PUBLIC_URL%/favicon.ico와 같이 값이 설정되어 있다. 이 %PUBLIC_URL%는 React에 제공하는 접두어로 공개 사이트 URL이 설정된다.

· id="root" 태그에 대해

<body> 부분에 <div id="root"></div>라는 태그가 있다. 이 id="root"라는 것이 어디선가 본 기억이 있을 것이다. 그렇다, index.js의 ReactDOM.render 인수로 document.getElementById('root')로 지정하였던 것이다. 지정한 root가 <div id="root"></div>라는 이 태그를 가르킨다. 즉,이 태그 부분에 <App /> 컴포넌트를 포함하도록 되어 있다.

이 index.html 템플릿의 기능은 이뿐이다. 단지 <div id="root"></ div> 태그를 제공하고 여기에 컴포넌트가 포함되는 템플릿이다.



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에서 실행하고 있는 전부이다.


'React' 카테고리의 다른 글

[React] 컨포넌트 생성  (0) 2017.12.31
[React] React 기본적인 구조  (0) 2017.12.31
[React] 개발 준비  (0) 2017.12.31

우선, React을 사용할 수 있도록 한다. 간단한 프로그램을 작성하여 실제로 동작시켜 보고, 배포하는 빌드 작업까지의 React의 기본적인 사용법을 설명한다.


React 준비

React 어플리케이션 생성

실제로 React 어플리케이션을 만들어 보겠다. 명령 프롬프트 또는 터미널을 열고 cd로 적당한 위치로 이동한다. 그리고 다음과 같이 명령을 실행한다.

$ create-react-app my-app

그러면 아래와 같이 출력이 된다.

Creating a new React app in /Users/kimkc/dev/react/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> fsevents@1.1.2 install /Users/kimkc/dev/react/my-app/node_modules/fsevents
> node install

[fsevents] Success: "/Users/kimkc/dev/react/my-app/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/kimkc/dev/react/my-app/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

+ react-scripts@1.0.17
+ react@16.2.0
+ react-dom@16.2.0
added 1266 packages in 63.989s

Success! Created my-app at /Users/kimkc/dev/react/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

에러 없이설치가 완료되었다면 my-app 라는 디렉토리가 만들어 진다. 그 안에 React 어플리케이션에 대한 파일이 설치된다. React 어플리케이션은 이렇게 간단히 생성할 수 있다.

$ create-react-app [응용 프로그램 이름]

React 구성

생성된 디렉토리를 확인해 보면 생각보다 파일 및 디렉토리가 많고 커서 놀랄지도 모른다. 정리해 보면 다음과 같다.

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

파일

.gitignore

Git 관련 파일이다.

package.json

npm 패키지 관리를 위한 파일이다.

README

readme 파일이다.

※ 파일들은 어플리케이션 본체와는 직접적인 관계는 없다.

폴더

node_modules

Node.js 모듈 (프로그램) 관련된 파일들이 정리되어 있다. 크기가 제법 커서, "겨우 JavaScript 라이브러리를 동작하는데 왜 이렇게 많아!?"라고 놀랄 수도 있다. 하지만 대부분은 "Node.js로 서버 프로그램을 시작하고 운영하기 위하여 필요한 것"이므로 걱정하지 않아도 된다. 별도로 여기에 있는 것 전부를 업로드하지 않으면 사용할 수 없는 것은 아니다.

public

Web에서 공개되는 파일(직접 파일에 액세스할 수 있는 것)들이 정리되어 있다. 여기에는 디폴트 Web 페이지인 index.html과 favicon.ico 아이콘이 있다.

src

JavaScript 소스 코드 관련된 것들이 정리되어 있다. React 프로그램 관련된 것들은 이 안에 있다. 또한 React 컴포넌트에서 사용하는 CSS 파일 등도 여기에 저장되어 있다. 즉, "React 프로그램과 프로그램에서 사용하는 파일들'이 여기에 있다.

당분간 public과 src 폴더에 있는 파일들의 편집이 개발의 중심이 될 것이다. 그 이외의 것은 직접 편집하거나 이용하는 일은 거의 없다.

React 실행 및 배포

일단 프로그램의 내용은 나중에 확인하고 create-react-ap으로 만든 React 어플리케이션을 움직여 보자. 이도 npm 명령을 이용하여 실행한다.

명령 프롬프트/터미널에서 cd 명령으로 응용 프로그램 폴더로 이동한다. 그리고 다음과 같이 실행하자.

$ npm start

이 명령어로 Node.js 서버 프로그램이 시작되고, Web 브라우저에서 Web 페이지가 열린다. 응용 프로그램의 첫 페이지는 아래와 같다.

http://localhost:3000/

"Welcome to React"라고 표시된 페이지가 나타날 것이다. 이 샘플에서 제공되는 React 어플리케이션의 페이지이다.

React 어플리케이션 배포

그럼 React에서 만든 응용 프로그램을 실제로 서버 등에 배포하는 방법을 설명한다. 폴더 자체는 Node.js 모듈이 있기 때문에 60MB 이상이다. 샘플로써는 이렇게 커서는 사용하기 불편하다.

React 어플리케이션을 배포하려면 npm 빌드 기능을 사용한다. 명령 프롬프트/터미널에서 어플리케이션 디렉토리로 이동하여 다음과 같이 실행한다.

$ npm run build

그러면 어플리케이션이 빌드된다.어플리케이션 디렉토리에 build 라는 디렉토리가 생성된다. 이 디렉토리는 빌드하여 만들어진 어플리케이션 디렉토리에 있다. 이 디렉토리의 내용을 서버에 업로드하면 된다.

(※ 단, 생성된 코드를 보면, 프로그램 내에서 사용하는 파일들이 절대 경로로 지정되어 있기에, 서버의 하위 디렉토리 등에 배치하면 경로가 어긋나 잘 움직이지 않을 수 있다)

이 npm run build라고 명령은, 사실 npm 명령이 아니다. React 어플리케이션의 package.json에 설정되어 있는 스크립트으로 React 스크립트를 실행하여 빌드 프로세스를 실시하는 것이다.

 

우선은 이것으로 React 어플리케이션을 만들고 동작까지 할 수 있게 되었다. React의 사용법에 대해 다음에 설명하겠다.



npm init으로 어플리케이션 생성

앞에서는 create-react-app을 사용했지만, 이것을 이용하지 않고 React 응용 프로그램을 만드는 방법도 있다.

처음부터 응용 프로그램을 만들기

수동으로 npm을 초기화하고, 필요한 라이브러리를 설치하는 방법을 설명한다.

아래과 같은 순서로 명령을 실행하는 것입니다. ("어플리케이션 이름"은 만들 어플리케이션의 이름이다)

$ mkdir [어플리케이션 이름]
$ cd [어플리케이션 이름]
$ npm init
$ npm install --save react react-dom

React 어플리케이션은 react와 react-dom이라는 두 가지 패키지가 설치되면 그것으로 동작한다. 다만, 이 방법으로 만든 것은 구체적인 Web 어플리케이션의 파일들은 일절 제공되지 않는다. 필요한 라이브러리만 준비된 이른바 '빈 어플리케이션"이다. 따라서 어플리케이션의 파일은 직접 수작업으로 만들어 나가야 한다.

아래는 npm init를 실행했을 때 출력이다. 패키지명, 버전, 설명 등을 입력받게 되어 있다.

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (my-app2) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/kimkc/dev/react/my-app2/package.json:

{
  "name": "my-app2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) y

아래는 npm install --save react react-dom 명령어를 실행해서 나욘 출력 내용이다.

$ npm install --save react react-dom
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN my-app2@1.0.0 No description
npm WARN my-app2@1.0.0 No repository field.

+ react@16.2.0
+ react-dom@16.2.0
added 18 packages in 5.472s

생성된 파일 및 디렉토리 구성

이 방식으로 생성된 파일이나 디렉토리는 다음과 같다.

.
├── node_modules
├── package-lock.json
└── package.json
  • node_modules : Node.js 관련 패키지들이 저장되어 있다.
  • package.json : npm 패키지 관리 파일이다.

주요 파일 및 폴더는 2개뿐이다. 이것들은 create-react-app에서 만들어진 같은 이름의 폴더/파일과 동일하다.

npm으로 패키지가 관리되는 어플리케이션은 기본적으로 폴더의 구성이 정해져 있다. 응용 프로그램을 개발하려면, 이 어플리케이션 폴더 안에 src 폴더를 만들고, 이 안에 실행하는 메인 프로그램(JavaScript 스크립트 파일)으로 'index.js'라는 파일을 만든다. 이것이 React 어플리케이션의 메인 프로그램인 셈이다.

어느 방식으로도 만들어지는 응용 프로그램의 형태는 대체로 동일하다. 다른 것은, "샘플 응용 프로그램 파일이 처음부터 준비되어 있는가"라고 뿐이다. 따라서 특별한 이유가 없다면 create-react-app에서 작성하는 것이 편할 것이다.



'React' 카테고리의 다른 글

[React] 컨포넌트 생성  (0) 2017.12.31
[React] React 기본적인 구조  (0) 2017.12.31
[React] 개발 준비  (0) 2017.12.31

+ Recent posts