리액트 프로젝트 만들기

리액트를 제대로 사용하기 위해서는 babel과 webpack을 설정해서 사용해야 합니다.
바벨로는 문법을 변환해주고 webpack으로는 파일을 하나로 패키징 해줌으로써 수십개가 넘는 파일을 일일이 html에 넣을 필요가 없어집니다.

바벨과 웹팩에 대해 잘 모르시는 분들은 바벨이란?과 웹팩이란? 글을 읽고서 오시는 것을 추천해드립니다.

jsx에 대한 이해

jsx는 리액트에서 가장 핵심적인 역할을 합니다. jsx는 javascript + XML의미하는 단어로 javascript에 <태그></태그>, <태그 />와 같은 문법을 함께 사용할 수 있게 해줍니다.

가장 기본적인 코드입니다.

import React from 'react';
import { render } from 'react-dom';

render(
<div>Hello World</div>,
document.getElementById("root")
);

보시는 것처럼 html 문법 같은 코드를 같이 사용할 수 있습니다.

리액트 시작하기

위에 보셨던 것처럼 리액트를 시작하기 위해서는 jsx라는 문법을 사용해야 되는데 이 jsx는 브라우저에서 즉시 실행하지는 못하고 babel을 이용한 트랜스파일을 해주셔야지만 실행할 수 있습니다.

이 과정에서는 babel만 이용해도 무관하지만, 나중에 자바스크립트 파일이 여러개 생겼을 때와 npm으로 설치한 각종 파일을 웹에서 좀 더 쉽게 사용하기 위해 webpack과 같이 사용하겠습니다.

npm i -D react react-dom babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2 webpack webpack-dev-server webpack-merge

react: react 컴포넌트를 만들기 위해서 가장 많이 사용됩니다.
react-dom: react컴포넌트를 가공해주는 라이브러리 입니다.(화면에 그리거나, 문자열로 뽑아내는 함수가 있습니다.)
babel-loader: webpack에서 babel을 사용하기 위해서 사용합니다.
babel-core: babel-loader에서 내부적으로 babel api를 사용하기 때문에 필요합니다.
babel-preset-es2015: 구버전의 브라우저를 지원하기 위해서 사용합니다.
babel-preset-react: jsx를 자바스크립트 문법으로 변환하기 위해서 사용합니다.
babel-preset-stage-2: 설치하지 않아도 무관하지만, 리액트에서 있으면 좋은 최신문법을 추가적으로 사용할 수 있습니다.
webpack: 리액트를 하다보면 여러개의 파일이 만들어지는데 하나로 묶어줍니다.
webpack-dev-server: 컴포넌트 수정시 화면에 즉시 반영을 해줘서 개발 생산성을 높여줍니다.
webpack-merge: 개발환경과 배포환경을 분리하기 위해서 사용합니다.

프로젝트를 시작할때는 가장 먼저 webpack을 설정해주는게 좋습니다.

//webpack.config.base.js
const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, '..', 'src', 'index.js'),
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '..', 'dist')
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader'
        }]
    }
}
//.babelrc
{
    "presets": [
        "es2015", 
        "stage-2",
        "react"
    ]
}

src

index.js
config
webpack.config.base.js
.babelrc

과 같은 디렉토리 구조로 만드신다음에 위에 설정을 해주세요 그리고 npx webpack --config ./config/webpack.config.base.js 를 적어주시면 index.js에 만든 jsx가 빌드되서 dist폴더에 생성이 됩니다.

//빌드전 
import React from 'react';
import {render } from 'react-dom';

render(
    <div>테스트</div>, 
    document.getElementById("root")
);

// 빌드 후 


"use strict";


var _react = __webpack_require__(4);

var _react2 = _interopRequireDefault(_react);

var _reactDom = __webpack_require__(18);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _reactDom.render)(_react2.default.createElement(
    'div',
    null,
    '\uD14C\uC2A4\uD2B8'
), document.getElementById("root"));

이 외에도 babel과 webpack이 자동으로 생성한 소스코드가 있지만, 변환된 부분만 보면 react에 createElement라는 메소드를 사용하고 있고 한글도 유니코드로 변환이 된 것을 확인할 수 있습니다.

index.html 파일을 만들고 빌드된 bundle.js 파일을 script 파일로 가지고 오면 구 브라우저에서도 돌아가는 리액트 앱을 확인할 수 있습니다.