리액트 개발 환경 세팅하기
그럼 리액트를 사용하기 위한 개발 환경을 세팅해보자. 대부분의 블로그에서 리액트와 함께 Webpack, Babel을 함께 소개하는 경우가 많다. 하지만 입문자 입장에서는 리액트만으로도 공부하기 벅차기 때문에 본 글에서는 내용은 다루지 않겠다.
Node.js
리액트를 설치하고, 리액트 관련 외부 패키지를 쉽게 설치하기 위해서는 NPM이 필요하다. NPM(Node Package Modules)은 Node.js 모듈을 패키지화시켜 모아놓은 것을 의미한다. 웹에 필요한 모든 기능을 한 명이 개발자가 구현하는 것은 거의 불가능에 가깝다. 그래서 다른 개발자가 만들어 놓은 모듈을 다운로드 받아 쉽게 적용할 수 있도록 도움을 주는 것이 NPM이다.
Node.js는 공식 웹사이트에서 다운로드 받아 클릭 몇 번으로 쉽게 설치 가능하다. 설치 파일은 안전성과 신뢰도가 높은 버전으로 진행하면 된다.
Node.js 설치를 완료했다면, 터미널에서 NPM 버전 확인을 통해 해당 프로그램이 정상적으로 설치됐는지 확인한다.
node --version // *v8.11.3
npm --version // *v5.6.0
Homebrew & Yarn 설치 ( 맥 사용자용 )
Homebrew는 애플에서 제공하지 않는 유용한 패키지를 설치할 때 사용되는 패키지 관리자이다. 간혹 NPM으로 리액트 & 리액트 네이티브 관련 외부 패키지를 설치할 때 문제가 발생될 수 있다. 이때는 NPM 대신 Yarn 패키지를 사용하는 것을 권장한다.
Yarn은 페이스북에서 만든 새로운 자바스크립트 패키지 매니저이다. 이미 거대화된 NPM보다 속도 측면에서 빠르다는 장점이 있다. Yarn은 Homebrew로 설치할 수 있다. ( 필자의 경우 Yarn으로 리액트와 리액트 네이티브 외부 패키지를 설치하고 있다. )
윈도우에서는 Homebrew를 사용할 수 없다. 대신 Scoop 패키지를 사용하면 Yarn 설치가 가능하다.
리액트 설치 및 프로젝트 생성
NPM 또는 Yarn 설치가 완료되었다면 리액트를 설치해보자. 리액트 프로젝트를 생성할 때는 페이스북에서 만든 create-react-app 생성 도구를 사용하는 것이 좋다. 불필요한 기능이 없고, 프로젝트에 필요한 기능만 제공하고 있어, 입문자 입장에서 기초 개념을 익히기 수월하다.
"npm install -g create-react-app"로 create-react-app을 설치하고, "create-react-app --version"으로 정상적으로 설치가 되었는지 확인해 보자.
npm install -g create-react-app
create-react-app --version
"create-react-app <프로젝트명>"을 입력하면 리액트 프로젝트 폴더가 생성되면서 react, react-dom, react-scripts 등 리액트 작업시 필요한 구성요소가 자동으로 설치된다.
create-react-app tutorial
리액트 설치 화면마지막으로 "cd <프로젝트명>"으로 경로를 바꾼 다음 "npm start"를 입력한다. 그럼 localhost가 자동으로 실행되면서, 브라우저에서 Welcome to React 문구가 출력된다. http://localhost:30000 주소를 주소창에 입력하면 접근이 가능하며, 파일을 수정하면 새로 고침없이 브라우저에 실시간으로 반영된다. Console에서 에러 메시지도 확인할 수 있다.
cd tutorial
npm start
npm start 실행화면위 설치 과정을 정리하면 다음과 같다.
npm install -g create-react-app
create-react-app --version
create-react-app tutorial
cd tutorial
npm start
리액트 설치 파일 살펴보기
설치된 리액트 파일에서 각각의 파일들이 어떠한 역할을 담당하고 있는지 중요 파일을 중심으로 알아보자.
index.html
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
......
</head>
<body>
<div id="root"></div>
</body>
</html>
index.html은 기대와 달리 기존 HTML 문서와 똑같은 구조를 갖고 있다. HTML 태그를 추가하면 코드가 바로 반영이 되어 브라우저 내용이 업데이트된다.
<div id="root"></div>
<!-- <h1> 추가 -->
<h1>동해물과 백두산이 마르고 닳도록</h1>
실시간으로 반영된 결과App.js
/* 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;
import, class, export 등 App.js 파일은 ES6에 새롭게 등장한 문법으로 구성되어 있다. 일단 return 문을 살펴보면 HTML 문서와 비슷한 구조를 갖고 있는 코드가 작성되어 있다. HTML과 달리 className으로 class 속성을 대체했다는 점, src 속성값으로 이미지 파일 경로 대신 {logo}가 표기되어 있다는 점에서 차이가 있다.
return 문의 코드는 리액트에서 사용하는 HTML 문법으로 "JSX" 라고 말한다. JSX 안에 있는 <h1> 콘텐츠를 변경하면 결과값이 실시간으로 반영되어 화면에 표기된다.
/* <h1> 콘텐츠 변경 */
<h1 className="App-title">리액트 세계에 오신 것을 환영합니다.</h1>
실시간으로 반영된 결과즉, App.js 파일은 현재 웹사이트 화면에 표기되는 정보를 담고 있다.
index.js
/* 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();
index.js 파일에도 import를 사용하여 리액트 관련 파일과 CSS, 몇 개의 자바스크립트 파일들이 적용되어 있다.
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render()는 App 클래스로 리턴된 JSX를 #root 안에 적용시키겠다는 의미다. 요소 검사를 통해 HTML 문서를 살펴보면 #root 안에 App 클래스로 리턴된 JSX 코드가 삽입되어 있는 것을 확인할 수 있다.
정확한 확인 작업을 위해 App.js, index.js 안에 있는 코드를 다음과 같이 변경해 보자.
/* App.js */
// 1) App 클래스명을 Test로 변경
class Test extends Component {
render() { ...... }
}
// 2) 랜더링 된 Test 클래스 결과물(JSX)를 수출(export)한다.
export default Test;
/* index.js */
// 3) App.js에서 수출(export)된 Test 클래스 결과물(JSX)를 수입한다.
import Test from './App';
// 4) 수입한 Test 클래스 결과물(JSX)을 <div id="root"></div> 안에 삽입한다. ReactDOM.render(<Test />, document.getElementById('root'));
동일한 결과가 출력됨App 클래스명을 Test로 변경해도 같은 결과가 출력된다.
정리하면 App.js 파일은 브라우저 화면을 담고 있다. 해당 파일에서 구체적인 화면을 담고 있는 영역이 App 클래스(또는 Test 클래스)이다. 이를 리액트에서는 컴포넌트라고 한다. 이렇게 제작된 컴포넌트는 export(수출), import(수입)를 사용하여 index.js 파일에 전달하고, 이를 ReactDOM.render()를 사용하여 index.html 파일에 적용한다.
