react의 기본 개념

react 란 정적인 html 페이지를 js 라는 스크립트 언어를 통해 동적으로 redering 하기 위한 라이브러리이다.
react의 핵심은 단순히 browser라는 환경이 아닌 많은 환경에서 html 페이지를 렌더링 할 수 있게 하여 보다 다양한 환경에 쉽게 rendering 될 수 있는 페이지를 만드는 것이다. js 는 일반적으로 DOM API 를 통해 화면을 렌더링 하는데 흔히 document.createElement 와 같은 명령어들이 대표적이 예이다. 우리는 react가 제공하는 함수들을 통해 렌더링을 제어하며 react 는 우리를 대신하여 효율적으로 DOM APU 를 컨트롤 하여 매우 효과적으로 렌더링을 제어한다. 우리는 react가 제공하는 virtual dom 환경을 통해 렌더링을 조작하며, 이러한 virtual dom 을 사실 단순한 javascript object에 불과하다.

DOM Rendering

리액트는 매우 효율적으로 DOM API 를 통해 렌더링을 수행하며, 대표적으로 페이지를 리 렌더링하는 시점에 바뀐 부분과 바뀌지 않은 부분들을 파악하여 반드시 필요한 부분에 대해서만 rerendering을 수행하게 되므로 브라우저의 한정된 자원을 효율적으로 사용하여 클라이언트 효율을 올려준다.

React Elemnt and Component

react는 DOM API 의 element에 매칭되는 독자적인 element를 가지며 이는 js object이다.
이러한 element 및 component들은 직관적으로 html element 를 조작하는 것과 같은 환경을 제공해 준다.

React with JSX

facebook 은 보다 직관적인 html 작성을 위해 jsx라는 독자적인 언어를 만들었으며, 이를 통해 우리는 마치 html을 작성하는 것과 같은 환경에서 react 의 virtual dom을 제어할 수 있게 되었다.

Webpack Loader

여기서 load란 build 과정에서 우리가 작성한 코드를 브라우저가 읽을 수 있도록 변형해주는 것을 의미한다. webpack은 다양한 환경에서 동작하기 위해 막대한 양의 loader 들을 가지고 있으며, 적절한 변환을 위해 우리는 webpack.config.js 파일을 작성하여 webpack에게 어떤 내용을 변형시켜 줄 지를 말해준다. 대표적인 loader 로는 ES6 과 React 분법을 ES5 로 변형시켜 주는 babel-loader와 scss 언어를 css 로 변형시켜주는 css-loader가 있다.

webpack 설치하기

webpack 설치하기

sudo npm install -g webpack

loader 설치하기

npm install babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 --save-dev

webpack 설정하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Example 5-20. webpack.config.js
module.exports = {
    entry: "./src/index.js", //define client entry file
    output: {
            path: "dist/assets", //export bundler to the dist foler
            filename: "bundle.js"
    },
    devtool: '#source-map', // source mapping - should be after output
    module: {
        rules: [ {
                        test: /\.js$/,
                        exclude: /(node_modules)/,
                        loader: ['babel-loader'],
                        query: {
                            presets: ['env', 'stage-0', 'react']
                        }
        } ]
    }, plugins: [ // uglify plugin
        new webpack.optimize.UglifyJsPlugin({ sourceMap: true,
        warnings: false,
        mangle: true })
    ]
}

uglify

번들링 되는 파일의 용량을 줄이기 위해 웹팩은 띄어쓰기, 변수명 축약 등의 작업을 수행하는 플러그인을 내포하고 있으며, 이를 사용하기 위해서는 다음 명령어를 통해 webpack을 로컬로 설치해야한다.

npm install webpack --save-dev

create react app

위와 같은 웹팩 설정 등의 여타 작업들을 수행하는 것은 상당히 성가신 일이다. facebook은 개발자들이 빠르게 설정을 완료할 수 있도록 cli 환경을 만들어 두었으며, create-react-app 을 통해 간편하게 리액트를 시작할 수 있다.
create-react-app 은 transpile 과 uglify 등 webpack 이 수행하는 여타의 작업들을 모두 끝내주기 때문에 가볍게 react 개발을 시작할 수 있다.

React 시작하기

React Create App 설치하기

1

npm install -g create-react-app

React Create App 을 통해 프로젝트 생성하기

1

create-react-app react_boot_template --scripts-version=react-scripts-ts

개발 의존 모듈 설치하기

1

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react react-hot-loader webpack webpack-dev-server

글로벌 모듈 설치하기

1

sudo npm install -g babel-cli

필요 디렉토리 만들기

1

mkdir server server/routes && touch public/index.html server/main.js server/routes/posts.js src/App.js src/index.js webpack.dev.config.js

webpack 설정하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

module.exports = {
    // 가장 처음 읽을 스크립트파일
    // 여기서부터 import 되어있는 다른 스크립트를 불러온다.
    entry: './src/index.js',

    // 파일을 합치고 ./public/bundle.js 에 저장한다.
    output: {
        path: __dirname + '/public',
        filename: 'bundle.js'
    },

    // ES6 문법과 JSX 문법을 사용한다
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};