2. React 개발 설정

이 글에서는 React 개발을 위한 설정을 진행하도록 하겠습니다. hello world의 출력까지 확인해 볼 것이며, 어떤 환경으로 구성되어야 하는지 살펴보겠습니다.

 

1. Create React App

 

React로 개발하기 위해서는 단순히  React의 문법만 알아서 되는 것이 아니라, 개발환경을 구축해주어야 합니다. 

 

이전 장에서 언급했듯이 우리의 React 프로젝트는 ECMAscript 6 (2015)/ECMAscript 7 (2016)와 JSX를 사용하여 개발됩니다. 그러나 모던 브라우저는 대부분 ES5 기반으로 동작하며 ES6/ES7, JSX를 온전히 지원하지 못합니다. 그러므로 작성한 코드가 브라우저에서 제대로 동작할 수 있도록 ES5로 변환해 주는 트랜스파일러, Babel이 필요하게 됩니다. 또한 React는 컴포넌트 기반으로 동작하기 때문에 컴포넌트를 여러 파일로 분리하여 저장하게 될 것입니다. 이 컴포넌트 파일들을 하나로 결합하기 위해서는 Webpack이라는 모듈 번들러가 필요합니다.

 

페이스북은 2016년 7월에 create-react-app(CRA)라는 공식 도구를 릴리즈하였습니다. 이름 그대로 React 작업환경을 명령어 하나로 설정할 수 있는 패키지로, webpack, babel 등을 설정하는 데 시간을 투자하지 않아도, 비공식적인 보일러플레이트(최소한의 변경으로 재사용할 수 있는 저작품)를 사용할 필요도 없습니다.  로컬 서버 실행부터 자동 번들링까지 지원하며,  'welcome to react' 보일러플레이트를 생성해줍니다. 즉, CRA를 이용하여 프로젝트를 생성하면 바로 개발을 시작할 수 있는 환경이 갖추어지는 것입니다. 

 

create-react-app을 CMD(Command Prompt. 명령 프롬프트)에서 설치해보도록 하겠습니다. 아래 중 어느 방법으로 설치하셔도 동일하게 동작하니 편한 패키지 매니저를 사용하시면 됩니다.

npm install -g create-react-app

yarn global add create-react-app

명령어가 제대로 실행되면 아래와 같이 출력됩니다.

{현재폴더경로}>npm install -g create-react-app
C:\Program Files\nodejs\create-react-app -> C:\Program Files\nodejs\\node_modules\create-react-app\index.js + create-react-app@1.5.2
added 67 packages from 20 contributors in 5.342s

설치된 패키지 환경에 따라 added package의 개수는 차이가 있을 수 있습니다. 

---

2. Welcome to React

 

그럼 이제 CRA를 사용해서 test-react-app이라는 React 프로젝트를 생성해보도록 하겠습니다. 프로젝트를 생성할 위치로 이동한 뒤, 아래 명령어를 실행하여 주십시오.

create-react-app test-react-app

yarn create react-app test-react-app

환경에 따라 다르지만 약 1-3분의 시간이 프로젝트를 생성하는 데 소요됩니다. 프로젝트를 생성하는데 성공하면 아래와 같이 출력됩니다.

{현재폴더경로}>create-react-app test-react-app
  
Creating a new React app in {현재폴더경로}\test-react-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
 
> uglifyjs-webpack-plugin@0.4.6 postinstall {현재폴더경로}\test-react-app\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
+ react@16.4.1
+ react-dom@16.4.1
+ react-scripts@1.1.4
added 1319 packages from 810 contributors and audited 14299 packages in 139.611s
found 0 vulnerabilities
 
Success! Created what at {현재폴더경로}\test-react-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 test-react-app
  npm start
Happy hacking!

생성된 프로젝트의 구조는 다음과 같습니다.

• index.html : 메인 페이지
• App.js : App이라는 이름의 컴포넌트 
• index.js : webpack Entry point. DOM이나 App컴포넌트를 호출
• package.json : 의존 패키지와 버전 지정
• registerServiceWorker.js : 운영 레벨에서 로컬 캐시로부터 리소스를 제공하기 위한 서비스 워커 관련 설정

 

지금 우리가 살펴볼 코드는 App.js와 index.js입니다. 그 외의 코드는 그대로 두고 사용할 것이며 다음 글에서부터 확인하도록 하겠습니다. (index.html은 수정하지 않아도 상관없으므로 아래 두 코드만 삽입하였습니다)

 

[src/App.js]

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;

[src/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();

아직 React의 문법이 낯설어 정확히 어떻게 동작하는지 이해가 되지 않으시겠지만, 앞으로 차근차근 알아가도록 할 것이니 코드는 신경 쓰지 않고 동작시켜보도록 하겠습니다.

 

생성된 프로젝트 내부로 이동하여(cd test-react-app) test-react-app을 실행시킵니다. 

npm start

yarn start

start 명령어는 webpack-dev-server를 start 합니다. webpack-dev-server는 webpack에서 지원하는 간단한 개발서버로서, 별도의 서버를 구축하지 않고 웹서버를 열 수 있게 해 줍니다. 

 

CRA를 설치하면 디폴트 값으로 react-hot-loader가 설치됩니다. 그러므로 hot-reload가 적용되어, 개발 서버가 running중일 때 코드를 수정하면 자동으로 적용되며, 수정된 컴포넌트만 업데이트됩니다. 

서버가 제대로 실행되면 localhost:3000로 접속합니다. 보일러플레이트의 화면은 아래와 같습니다.

그럼 이제 보일러플레이트의 코드는 제쳐 두고, Hello, world! 를 생성해 보도록 하겠습니다. 생성된 프로젝트의 src/App.js를 열어, 내용을 모두 지우고, 아래 코드를 삽입합니다. 

 

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <h1>
        Hello,world!
      </h1>
    );
  }
}
 
export default App;

혹은, src/index.js의 내용을 수정하는 방법도 있습니다. (마찬가지로 index.js의 내용을 모두 지우고 아래 코드를 삽입해줍니다. App.js는 처음 CRA로 생성되었을 때 코드 그대로, 수정하지 않습니다.)

import React from 'react';
import ReactDOM from 'react-dom';
 
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
); 

참고. 단순히 hello, world만 출력하는 하나의 기능만 수행하는 예제이므로 index.js에 기재하여도 괜찮으나, React는 컴포넌트 기반이므로 기능에 대한 내용은 App.js에 기재하여 컴포넌트로 빼주는 것이 옳습니다.

 

아래와 같이 제대로 동작하는 것을 볼 수 있습니다. 

보일러플레이트는 제대로 실행하는 환경을 갖추어 주고, 이 환경이 제대로 동작함을 보여주기 위해 만들어진 welcome page입니다. 현재 우리의 프로젝트는 react-hot-loader가 설정되어 있으므로, h1태그 내부의 문자열을 수정하면 곧바로 페이지에서 변경되는 것을 확인하실 수 있습니다. 

---

Next article..

 

이 글에서는 Hello, world! 의 동작까지 확인해 보았습니다. 자세한 React의 문법에 대해서는 다음 글부터 다루도록 하겠습니다. 

 

CRA 없이 개발환경 설정하기
CRA를 사용하면 React는 프로젝트를 생성하면서, 초심자가 접근하여 수정할 필요가 없다고 생각되는 부분들은 모두 hide 처리해버립니다. 예를 들어, webpack.config와 같은 파일은 건드릴 수 없게 되어 있습니다. (eject 명령어로 꺼낼 수 있으나, 복잡한 설정을 할 것이 아니라면 추천하지 않음) 그래서 개발에 대한 환경 설정이 어려워 개발, 운영시 부적합할 수도 있습니다. 이에 관련된 내용은 React 마지막 글에서 따로 다루도록 하겠습니다.  

 

[references]

reactjs korean docs

Hello World – React

CRA github

facebook/create-react-app