'Front-End/ReactJs'에 해당되는 글 15건

리액트 컴포넌트 라이프사이클

1. 컴포넌트 라이프사이클 이벤트

- 생성된 컴포넌트를 조금더 세밀하게 제어할 수 있도록 라이프 사이클 이벤트를 사용한다.

2. 라이프사이클 종류

1) 마운팅(mounting) 이벤트

- React 엘리먼트를 dom노드에 추가 할 때 발생한다.

- 이벤트를 한번만 실행한다

2) 갱신(updating) 이벤트

- 속성이나 상태가 변경되어  React 엘리먼트를 갱신 할 때 발생한다

- 이벤트 여러번 발생

3) 언마운팅(unmounting) 이벤트

- dom에서 제거 될 때 사용된다

- 한 번만 실행된다.

3. 라이프사이클 사용방법

class Content extends React.Component{ componentWillMount(){ console.log(ReactDom.findDOMNode(this)); } render(){ return{} } }

리액트의 상태저장 컴포넌트와 상태비저장 컴포넌트

1. 컴포넌트 상태

- react 에서 상태는 컴포넌트의 변경 가능한 데이터 저장소다.

- 속성과 상태는 뷰를 갱신하기 위하여 사용하지만 서로다른 목적을 가지고 있다.

- 상태는 동적으로 뷰를 렌더링 할 때 사용한다

2. 속성(props) vs 상태(state)

1) 접근 방법

- 속성 : this.props.NAME

- 상태 : this.state.NAME

2) 전달 방법

- 속성: 부모에서 자식 컴포넌트로 전달해야만 render()에서 사용 가능하다

- 상태: 현재 컴포넌트에서 변경하여 render() 에 전달 가능하다

3. 상태저장 컴포넌트

1) 초기 상태 설정

- render() 에서 상태 데이터를 사용하려면 상태를 초기화 해야한다.

- construtor()를 사용한다.

class Clock extends React.Component{ constructor(props){ super(props) this.state = {currentTime: (new Date()).toLocaleDateString('en')} } render(){ return <div>{this.state,currentTime}</div> } } ReactDOM.render( <Clock/>, document.getElementById('app') );

- super()를 통하여 반드시 전달해야 부모(React.Component)에서 기능 할 수 있다.

2) 상태 갱신 하기

- this.setState(data, callback) 을 이용하여 상태를 갱신 할 수 있다.

- setState()는 비동기로 작동한다. 또한 render() 를 호출 한다.

class Clock extends React.Component{ constructor(props){ super(props) this.launchClock() this.state = {currentTime: (new Date()).toLocaleDateString('en')} } launchClock(){ setInterval(()=>{ console.log('Update time') this.setState({ currentTime:(new Date()).toLocaleString('en') }) },1000) } render(){ return <div> {this.state.currentTime} </div> } } ReactDOM.render( <Clock/>, document.getElementById('app') );  

- setInterval() 함수를 이용하여 1초마다 상태를 갱신하여 화면에 출력한다. 화면을 보면 초가 바뀌는걸 알 수 있다.

4. 상태비 저장 컴포넌트

- 상태 객체가 없는 일반 컴포넌트를 의미 한다.

class HelloWorld extends React.Component{ render(){ return( <div><h1>1. HelloWorld</h1></div> ) } }  

1) 상태비 저장 컴포넌트 정의

- react 컴포넌트를 상속하는 방법이 있지만 function() 으로 선언하는 것을 추천한다

//1번 const HelloWorld = function(props){ return <h1 {...props}>Hello {props.frameworkd}</h1> } //2번 const HelloWorld = (props) => {return <h1 {...props}>Hello {props.frameworkd}</h1>} //3번 const HelloWorld = props => <h1 {...props}>Hello {props.frameworkd}</h1>  

5. 상태 저장 vs 상태 비저장 컴포넌트

- 상태 저장은 적을 수록, 상태 비저장 컴포넌트는 많이 사용할 수록 좋다

- 상태 비저장 컴포넌트를 사용함으로 간결하고 유지보수 쉬운 개발을 할 수 있다.

1) 상태 비저장 컴포넌트에 속성전달

const DigitalDisplay = props => <div>{props.time}</div> const AnalogDisplay = function(props) { let date = new Date(props.time) let dialStyle = { position: 'relative', top: 0, left: 0, width: 200, height: 200, borderRadius: 20000, borderStyle: 'solid', borderColor: 'black' } let secondHandStyle = { position: 'relative', top: 100, left: 100, border: '1px solid red', width: '40%', height: 1, transform: 'rotate(' + ((date.getSeconds()/60)*360 - 90 ).toString() + 'deg)', transformOrigin: '0% 0%', backgroundColor: 'red' } let minuteHandStyle = { position: 'relative', top: 100, left: 100, border: '1px solid grey', width: '40%', height: 3, transform: 'rotate(' + ((date.getMinutes()/60)*360 - 90 ).toString() + 'deg)', transformOrigin: '0% 0%', backgroundColor: 'grey' } let hourHandStyle = { position: 'relative', top: 92, left: 106, border: '1px solid grey', width: '20%', height: 7, transform: 'rotate(' + ((date.getHours()/12)*360 - 90 ).toString() + 'deg)', transformOrigin: '0% 0%', backgroundColor: 'grey' } return <div> <div style={dialStyle}> <div style={secondHandStyle}/> <div style={minuteHandStyle}/> <div style={hourHandStyle}/> </div> </div> } class Clock extends React.Component{ constructor(props){ super(props) this.launchClock() this.state = {currentTime: (new Date()).toLocaleDateString('en')} } launchClock(){ setInterval(()=>{ console.log('Update time') this.setState({ currentTime:(new Date()).toLocaleString('en') }) },1000) } render(){ return <div> <DigitalDisplay time={this.state.currentTime}/> <AnalogDisplay time={this.state.currentTime}/> </div> } } ReactDOM.render( <Clock/>, document.getElementById('app') );  

- 상태 비저장 컴포넌트에 속성값을 받아 적절한 상태 컴포넌트를 구현 할 수 있다.

webpack, babel, reactjs 환경셋팅하기

1. 프로젝트 폴더 만들기

- 기본적으로 node 와  npm 이 설치되어 있어야 한다.

1) 폴더 구성

mkdir react-test cd react-test npm init -y

- npm init 을 통해 package.json 파일을 생성한다

mkdir dist cd dist touch index.html

- build 후 생성된 파일을 관리 하기 위하여 dist 폴더를 생성한다

<!DOCTYPE html> <head> <title>The Minimal React Webpack Babel Setup</title> </head> <div id="app"></div> <script src="/bundle.js"></script>

- bundle.js 는  webpack을 통해 빌드된 파일이다.

2. webpack 설치하기

- webpack 을 이용하여 모듈화하고 빌드를 진행한다.

npm install --save-dev webpack webpack-dev-server webpack-cli

1) package.json

... "scripts": { "start": "webpack-dev-server --config ./webpack.config.js --mode development", ... }, ...

- webpack-dev-server 를 사용하기 위한 설정이다.

2) webpack.config.js

module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: './dist' } };

- webpack을 사용하기 위한 설정파일이다.

3) index.js 

- 어느 정도 설정이 되었으니 테스트 해보자

- index.js 파일을 만든다

mkdir src cd src touch index.js //폴더구조 - dist -- index.html - node_modules - src -- index.js - package.json - webpack.config.js

- src/index.js

console.log('Hello World');

4) npm start

- 서버를 띄우면 로그가 찍히는 것을 볼 수 있다

3. babel 설치하기

- ES6 를 사용하기 위해 바벨이 필요하다. 무엇보다 react개발에 jsx 를 컴파일하는 일로 바벨을 사용한다

npm install --save-dev babel-core babel-loader babel-preset-env

1) jsx 파일을 js로 변경하기 위한 설정

npm install --save-dev babel-preset-stage-2

2) webpack설정과 package.json이 바벨 변화를 확인하기 위한 설정

npm install --save-dev babel-preset-react

3) package.json

... "keywords": [], "author": "", "license": "ISC", "babel": { "presets": [ "env", "react", "stage-2" ] }, "devDependencies": { ...

4) webpack.config.js

module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] } ] }, resolve: { extensions: ['*', '.js', '.jsx'] }, output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: './dist' } };

5) .babelrc

- root 폴더에 .babelrc 라는 설정파일을 만든다

{ "presets": [ "env", "react", "stage-2" ] }

4. react  설치하기

npm install --save react react-dom

1) src/index.js

import React from 'react'; import ReactDOM from 'react-dom'; const title = 'My Minimal React Webpack Babel Setup'; ReactDOM.render( <div>{title}</div>, document.getElementById('app') );

5. HMR 설치하기

- 개발하는동안 실시간으로 서버에 변화를 반영할 수 있다.

npm install --save-dev react-hot-loader

1) webpack.config.js

const webpack = require('webpack'); module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] } ] }, resolve: { extensions: ['*', '.js', '.jsx'] }, output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { contentBase: './dist', hot: true } };

2) src/index.js

import React from 'react'; import ReactDOM from 'react-dom'; const title = 'My Minimal React Webpack Babel Setup'; ReactDOM.render( <div>{title}</div>, document.getElementById('app') ); module.hot.accept();