Learning React(8. React 개발환경 구성)

1. React 개발환경 구성

리액트 앱을 개발하기 위한 환경 구성
지금까지는 스크립트 파일을 포함시켰지만 이 스크립트 구문으로 리액트 라이브러리뿐만 아니라 브라우저가 JSX를 만났을 때 해야할 일을 지시하는 바벨 라이브러리도 로딩된다
- 이 방식의 문제는 성능이다, 브라우저는 본래의 임무인 페이지 로딩과 관련된 모든 작업에 더해 JSX를 실제 자바스크립트로 변환하는 역할도 해야 한다
- JSX의 자바스크립트로의 변환은 시간이 필요한 작업이며, 개발 단계에서는 큰 문제가 아니지만 앱이 출시돼 모든 실사용자가 성능상의 불이익을 받아야 한다면 이는 큰 문제가 될 수 있다
- 해결 방법은 페이지가 로딩 되기전에 JSX에서 JS로 변환돼 있게 개발환경을 구성하는 것이다
- 이렇게 하면 브라우저는 이미 변환된, 게다가 최적화된 JS 파일을 사용하기만 하면 된다
지금부터는 Node, Babel, Webpack의 조합을 사용할 예정이다

01. Create React와의 첫 만남

create react app github : https://github.com/facebook/create-react-app

node : https://nodejs.org/ko/

node 설치 확인

-1. npm install -g create-react-app

-2. 리액트 프로젝트 생성

create-react-app helloworld

-3. 리액트 프로젝트 실행

프로젝트 내부에 들어간 후 npm start
- yarn이 설치되어 있다면 yarn start를 권장한다

-4. 리액트 프로젝트 구성

02. HelloWorld 앱 개발

react 개발 환경도 만들었겠다 화면에 Hello, world!를 출력해보자!
깔끔하게 처음부터 시작하기 위해서 src 디렉토리의 모든 파일을 삭제하고 다시 시작하자!

-1. src / index.js 생성

import React from "react";
import ReactDom from "react-dom";
import HelloWorld from "./HelloWorld";

ReactDom.render(
  <HelloWorld />
  , document.getElementById("root")
);

-2. src / HelloWorld.js 생성

import React, { Component } from "react";

class HelloWorld extends Component {
  render() {
    return (
      <div className="helloContainer">
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default HelloWorld;

-3. style 적용해보기!

src / css / index.css

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

src / css / HelloWorld.css

h1 {
  font-family: sans-serif;
  font-size: 56px;
  padding: 5px 15px;
  margin: 0;
  background: linear-gradient(to bottom, white 0%, white 62%, gold 62%, gold 100%);
}