개발 환경 설정
설치
$ npm install -g babel webpack webpack-dev-server
$ npm init
package.json
scripts에 start 명령어 추가
{
"name": "contact",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-stage-0": "^6.24.1", //ES6 최신 문법 사용
"react": "^15.5.4",
"react-addons-update": "^15.5.2", // Immutability Helper 사용
"react-dom": "^15.5.4",
"react-hot-loader": "^3.0.0-beta.7"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^2.6.0",
"webpack-dev-server": "^2.4.5"
}
}
설정
기본 디렉토리 구조
reactApp
├── package.json
├── public # 서버 public path
│ └── index.html # 메인 페이지
├── src # React.js 프로젝트 루트
│ ├── components # 컴포넌트 폴더
│ │ └── App.js # App 컴포넌트
│ └── index.js # Webpack Entry point
└── webpack.config.js # Webpack 설정파일
webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: ['react-hot-loader/patch', './src/index.js'] ,
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
devServer: {
hot: true,
inline: true,
host: '0.0.0.0',
port: 4000,
contentBase: __dirname + '/public/',
},
module:{
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['es2015', 'stage-0', 'react'],
plugins: ["react-hot-loader/babel"]
}
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
Component LifeCycle
- componentWillMount - 렌더링이 되기 전(DOM 위에 만들어지기 전에 실행됨), DOM 처리 못함
- componentDidMount - 컴포넌트 생성 후 렌더링 된 다음 실행, 다른 자바스크립트 프레임워크 연동 및 AJAX, setTimeout, setInterval 사용
- componentWillReceiveProps - 새로운 Props를 받았을 때, props 에 따라 state 를 업데이트할 때 사용, setState 사용가능
- shouldComponentUpdate - props, state 가 변경되었을때 리렌더링할지 정함, 비교후 boolean 반환, JSON.stringify를 사용하여 여러 필드 비교하면 편함
- componentWillUpdate - 업데이트 되기 전, setState 사용불가능
- componentDidUpdate - 업데이트 된 후
- componentWillUnmount - 컴포넌트가 DOM에서 사라진 후 실행
참조 : https://velopert.com/
