[React] React 시작하기

create-react-app

create-react-app이라는 CLI 도구는 많은 스크립트와 사전 설정(개발서버 접근, 새로고침, css포함 등)을 준비해줌으로써 ReactJS어플리케이션을 만들기 쉽게 도와준다.

---

리액트 프로젝트를 시작하는 방법은 다음과 같다.

1. nodejs 설치

https://nodejs.org/ko/

Node.js

nodejs 다운로드하고 콘솔창에 'node -v' 입력 후 설치를 확인한다.

버전 정보가 출력되면 설치 완료.

 

2. npx 설치

npm 과 npx 차이

• npm은 node.js의 자동화된 의존성과 패키지 관리를 위한 패키지 매니저이다. -> nodejs 설치 시 함께 설치되므로 따로 설치할 필요 X
• npx는 npm 5.2.0 버전부터 추가된 도구로 node.js 패키지를 실행시키는 하나의 도구이다. -> 최신 버전의 패키지를 설치하고 실행 후 해당 패키지를 제거하는 일회성 명령 실행이라는 특징이 있다.

cmd 창에 입력 후 설치

npm install npx -g

버전 확인

 

3. create react app

npx 설치 후 react app을 생성한다.

npx create-react-app {app 이름}

 

4. visual studio code에서 app 열기

code {app 이름}

package.json 파일에서 다음과 같은 스크립트를 확인할 수 있다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

터미널에 아래 코드를 입력 후 start 스크립트 실행 -> 개발용 서버에 접속

npm start //npm run start

성공적으로 완료되면 다음과 같은 화면이 출력된다.

create-react-app 사용하여 어플리케이션을 만들었을 때 초기 버전

리액트 프로젝트가 시작된 것을 확인할 수 있다. 하지만 이어서 새로운 프로젝트를 위해 기본 세팅을 해보자.

 

5. 필요 없는 내용과 파일 지우기

테스트 문구, 로고, 디자인 등과 같은 내용의 코드를 지운다.

 

내용 지우기

src폴더 아래 index.js파일과 App.js파일에서 최소한의 코드만 남기고 지워준다.

 

src/index.js

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

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

src/App.js

function App() {
  return (
    <div>
      <h1>Welcome back!</h1>
    </div>
  );
}

export default App;

 

src 디렉토리 내 파일 삭제

App.css
App.test.js
index.css
logo.svg
reportWebVitals.js
setupTests.js

위 파일들을 삭제한 후 최종적으로 src 디렉터리에는 다음의 파일만 존재한다.

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

 

수정 후 실행하면 다음과 같은 결과 화면을 확인할 수 있다.

 

결과 화면 - 기본 화면 세팅

 

react app을 시작하기 위한 초기 설정이 끝났다!