[React-08]create-react-app, cli로 프로젝트 만들기

JavaScript와 HTML,CSS등에 대해서는 일체 다루지 않는다.

기초 지식은 다른 강의를 참조하도록 하라.

이 강의는 React의 사용법 위주로 작성되어 있다.

왜 React여야는지, React를 써야하는지에 대하지는 논하지 않으므로 그런 자료는 다른 데이터를 참조하라.

참조:

react docs 

지금까지는 프로젝트를 모두 여러분이 직접 타이핑을 하고 구조도 잡고해서 만들었다.

하지만 현업에서는 실제로는 프로젝트를 자동으로 생성해서 사용한다.

구조도 다 잡아주고 심지어 자동 컴파일까지해서 결과를 실시간으로 볼 수 있다.

이 좋은 기능의 일므이 바로 create-react-app이다.

이걸 처음 부터 가르쳐 주지않았던 이유는 웹프레임워크가 바로 cli로 배우면

나중에 왜 구조가 이렇게 되는지 생각하는 힘을 잃어버릴 수 있기 때문이다.

이는 react뿐만아니라 vue와 angular의 강의에서도 동일하게 진행 되었다.

이제 create-react-app을 사용해도보록 해보자.

npm install -g create-react-app

먼저 글로벌로 create-react-app을 설치해준다.

create-react-app <프로젝트 명>

만드는 방법은 아주간단하다. create-react-app을 한다음 프로젝트명을 쳐주면된다.

프로젝트는 기본적으로 yarn으로 되어있지만 npm과 호환되므로 그냥 npm으로 사용해도 무방하다.

맨처음 만들면 기본적으로 위처럼 프로젝트를 잡아준다.

각각 들어가서 확인해보면 이 때까지 우리가 배운 내용과 별반 다를바가 없다.

하지만 방식은 조금 새롭다.

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" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

막상 들어가서 보면 이 때까지는 createClass메소드를 사용해서 컴포넌트를 만들었다.

하지만 이제는 js class를 사용해서 Component를 상속받아서 만든다.

이 방식에 대해서는 다음 장에서 논의하도록하겠다.

npm start

시작 할때는 위처럼 사용해주면된다.

react 프로젝트가 동작하게 된다.

이렇게 실행하면 장점이 있는데 변동을 자동으로 감지해서 바로 즉각 반영해준다.

visual studio의 liver server와 유사하게 사용할 수 있다.

또한 eslint덕분에 오타나 에러를 쉽게 알 수 있다.

이제 프로젝트를 아주 쉽게 생성하고 사용할 수 있다.