[React] 리액트 프로젝트 시작할 때 초기화하기

 

VS Code사용.

 

create-react-app 설치 및 사용

리액트 프로젝트를 만들때는, 페이스북에서 만든 리액트 프로젝트 생성 도구인 create-react-app 을 사용한다.

프로젝트에 필요한 기능만 딱 들어있다.

 

 

1. create-react-app 을 설치하려면 일단 글로벌 설치를 한다.

yarn global add create-react-app

 

yarn?

npm과 yarn은 자바스크립트 패키지 매니저이다.

yarn이 npm보다 더 나은 점은 다음과 같이 요약할 수 있다.

 

1. 속도가 더 빠르다. (performance)

2. 보안성이 좋다. (security)

 

npm은 이름 그대로 '노드 패키지 매니저'이다. 런타임 동안 노드 환경에서 쓰이는 다양한 패키지들을 관리한다.

npm은 npm registry라고 불리는 공개적인 패키지들로 구성된 데이터베이스를 가지고 있다.

 

yarn은 npm의 부족한 부분들을 개선하기 위해 Facebook에서 개발되었다.

Yarn은 npm이 사용하는 동일한 npm 구조에 의존한다. 따라서 패키지의 레지스트리에 대한 것은 바뀌지 않았고, 설치 절차가 바뀌었다고 생각하면 된다.

 

Yarn에도 단점이 있다. 디스크 용량을 좀 더 많이 잡아먹는 편이라고 한다.

 

 

 

2. 그 다음 명령어를 통하여 프로젝트를 생성

create-react-app 프로젝트이름

 

 

3. 명령어를 실행 디렉토리에 '프로젝트이름' 이라는 디렉토리가 생긴다.

  코드 에디터를 사용하여 해당 프로젝트 디렉토리를 열고, '프로젝트이름' 디렉토리에 들어가서 다음 명령어를 실행

yarn start

 

 

4. 서버가 시작한다.

 

 

 

 

프로젝트 초기화

 

App.js 를 다음과 같이 변경

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        App
      </div>
    );
  }
}

export default App;

 

 

App.css, App.test.js, logo.svg 파일도 제거

 

그럼 페이지에 App 이란 텍스트만 나타난다.

 

이제 컴포넌트를 만들면 된다.