리액트 프로젝트 만들기

noreco(34)

Published in

#react

Words

279

Reading

2 min

Listen to this post

~2 min

리액트를 제대로 사용하기 위해서는 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"));