[React] 리액트 시작하기 - 개발 환경 설정 | 새로운 app 만들기

create-react-app으로 프로젝트 생성

Node.js 설치

리액트 프로젝트를 생성하기 위해서는 Node.js가 먼저 설치되어 있어야 한다.

 

다운링크

https://nodejs.org/ko/download/

설치 후, 터미널에서 node -v or npm -v 명령어로 버전을 확인할 수 있다.

 

create-react-app으로 프로젝트 생성

필요한 설정 과정을 생략하고 바로 프로젝트 작업 환경을 구축해 주는 도구

npx

npx는 npm의 5.2.0 버젼부터 새로 추가된 도구이다.

npx가 존재하지 않았을 경우에는 npm을 통해 react app 을 생성했지만,

> npm install -g create-react-app

-g 를 통해 전역적으로 create-react-app 가 설치함으로서 여러 문제점이 야기되므로

 

npm 을 통해 npx 를 설치하자.

> npm install npx -g

 

설치 후, npx 를 통해 react app 을 생성하자.

> npx create-react-app [app 이름]

app 이름으로 된 폴더로 들어가면 다음과 같은 파일트리 구조를 가진다.

.
├── README.md
├── node_modules
├── package.json
├── public
└── src

React App Start

생성한 디렉터리에서 다음 명령어를 입력하면 웹 브라우저로 프로젝트를 볼 수 있다.

> npm start

초기 src/index.js

 

필요한 부분 남기고 전부 지운다.

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

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

src 디렉토리 내의 필요없는 파일 삭제

 

최종적으로 src 에는 다음만 존재한다.

src
├── App.js
└── index.js

App.js 도 필요한 부분만 남긴다.

import React from 'react';

function App() {
  return (
    <div className="App">

    </div>
  );
}

export default App;

App.js 에서 작성한 것은 index.html 의 <div id="root"></div> 로 들어가게 된다.

 

index.js 파일

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

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

여기서 App.js파일 안에 작성한 것을 document.getElementById('root') 으로 넣어주게 된다.