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 | // Example 5-20. webpack.config.js |
uglify
번들링 되는 파일의 용량을 줄이기 위해 웹팩은 띄어쓰기, 변수명 축약 등의 작업을 수행하는 플러그인을 내포하고 있으며, 이를 사용하기 위해서는 다음 명령어를 통해 webpack을 로컬로 설치해야한다.
npm install webpack --save-dev
create react app
위와 같은 웹팩 설정 등의 여타 작업들을 수행하는 것은 상당히 성가신 일이다. facebook은 개발자들이 빠르게 설정을 완료할 수 있도록 cli 환경을 만들어 두었으며, create-react-app 을 통해 간편하게 리액트를 시작할 수 있다.
create-react-app 은 transpile 과 uglify 등 webpack 이 수행하는 여타의 작업들을 모두 끝내주기 때문에 가볍게 react 개발을 시작할 수 있다.
Comments