[실전 React.js] Part2. 프로젝트 시작하기

create-react-app으로 시작하는 리액트개발

박성은

Published in

hivelab-dev

6 min readDec 17, 2019

이번 Part부터는 리액트 개발을 시작하기 위해 설치해야 할 항목과 리액트앱의 기본 폴더/코드 구조를 살펴보도록 하겠습니다.

1. 환경세팅

1.1. Node 설치

Node.js는 리액트와 관련된 라이브러리들의 손쉬운 설치를 위해 필요한 node의 패키지 매니저 npm/yarn을 위해 필요합니다. https://nodejs.org/ko/

1.2. Yarn/npm 설치

Yarn 은 조금 개선된 버전의 npm 입니다.
각각의 장단점 이 있으니 원하시는 패키지 관리자를 선택해주시면 됩니다.
* 해당 가이드에선 yarn 패키지 관리자를 기준으로 설명되어 있습니다.

// git bash
brew install yarn

1.3. create-react-app 설치 및 사용

create-react-app 은 리액트 앱을 만들어주는 도구입니다.

yarn -g add create-react-app //create-react-app 설치 
create-react-app --version //버전확인 
create-react-app 폴더명 //프로젝트 폴더 생성 
cd 폴더명 //생성한 폴더로 이동 
yarn start //실행

프로젝트 폴더가 생성되고, 리액트앱이 실행되면 크롬브라우저에 자동으로 로컬 페이지가 로딩되면서 아래와 같은 화면이 나옵니다.

1.4. 프로젝트 중간 투입인 경우 / git사용 (commit / push / build)

구축이 아닌 프로젝트에 투입되어야한다면, 이미 리액트 빌드 되어진 저장소에서 pull을 받고 시작해보기로 합니다.

// 프로젝트 저장소 복사 및 폴더 생성(예시)
git clone https://github.com/hivelab/my-project.git react-itemlistyarn
yarn start

프로젝트 진행 중 commit과 push

git add --all // 내가 수정한 전체내역을 
git commit -m "커밋메세지"  // 커밋하고 
git push origin master

Github 빌드
아래 순서 중 2~4번은 첫 배포시에만 세팅해주시면 됩니다.

프로젝트 개발을 완료한 상태라는 가정 하에 터미널에서 리액트앱 루트폴더로 이동해 yarn build를 입력합니다.

yarn build

2. yarn add --dev gh-pages로 gh-pages를 설치합니다.

yarn add --dev gh-pages

3. package.json에 homepage를 추가합니다.

"homepage" : "http://myname.github.io/myapp" //깃허브경로

4. 같은 package.json 파일에서 “scripts” 부분에 다음을 추가해줍니다.

//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build",

5. yarn run deploy 입력하여 배포합니다.

yarn run deploy

2. 생성된 폴더 구조

react-itemlist/       // 생성한 프로젝트 이름
  README.md
  node_modules/
  package.json
  public/
    index.html   //실제 화면을 보여주는 파일입니다.
    favicon.ico
  src/           // JavaScript 코드가 들어가는 폴더입니다.
    App.css
    App.js
    App.test.js //삭제
    index.css
    index.js
    logo.svg //삭제

여기서 App.test.js , logo.svg 와 css파일은 필요없는 경우 삭제해도 무방합니다. (해당 실습에선 필요없기 때문에 삭제하도록 합니다.)

실습에서 다룰 주요 파일들의 베이스 코드를 보도록 하겠습니다.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';//1번내용ReactDOM.render(<App />, document.getElementById('root')); // 2.

App컴포넌트를 불러옵니다.
Index.html 내 ID값 root 하위요소에 App컴포넌트를 렌더링 하도록 설정합니다.

src/App.js

import는 외부의 파일을 불러 오는 명령어로, 리액트를 사용하기 위해서 react 라이브러리에서 React와 Component를 호출합니다.

import React, { Component } from 'react';

Component라는 리액트의 class를 상속 받습니다.

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>
        </p>
        </div>
    );
    }
}
export default App; //외부에서 import로 불러오기 위해 export

App.js는 앞으로 개발할 프로젝트의 state값을 관리하는 중심 컴포넌트가 될 것 입니다. App.js에서 이벤트는 어떻게 받는지, props는 어떻게 전달하는지 알아야 합니다.