리액트[React] - 생명주기(LifeCycle) 기초 설명 및 다운로드

React[리액트]- 생명주기(LifeCycle) 설명

 

① 리액트(React)에서는 Props, State값이 변화 될 때 컴포넌트(Component)에 많은 변화가 일어난다.

② 컴포넌트(Component) 생성, 업데이트, 제거 될 때 일어난다.

③ 리액트(React) 에서는 DOM 혹은 페이지에 올라갈 때를 마운트(Mount), 그 반대는 언마운트(Unmount) 라고 정의한다.

 

React Life Cycle

    React에서는 아래 그림과 같은 생명주기(LifeCycle)을 원칙으로 한다.

 

 

React 생명주기(LifeCycle) 예제 코드

 

main.js

 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.render(<App/>, document.getElementById('root'));
 
setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('root'));}, 4000); //4초 후에 Unmount
 

 

 

App.js

 

import React from 'react';
 
class App extends React.Component {
 
   constructor(props) {
      super(props);
 
      this.state = {
         number: 0
      }
   };
 
   increaseNumber() {
      this.setState({number: this.state.number + 1})
   }
 
   render() {
      return (
         <div>
            <button onClick = {this.increaseNumber.bind(this)}>증가</button>
            <Content curNumber = {this.state.number}></Content>
         </div>
      );
   }
}
 
class Content extends React.Component {
 
   componentWillMount() {
      console.log('Component WILL MOUNT!')           //컴포넌트 마운트 전
   }
 
   componentDidMount() {
      console.log('Component DID MOUNT!')            //컴포넌트 마운트 후 (Render 실행 완료)
   }
 
   componentWillReceiveProps(newProps) {
      console.log('Component WILL RECIEVE PROPS!')   //새로운 Props 받은 후
   }
 
   shouldComponentUpdate(newProps, newState) {       //True : 렌더링 O, False : 랜더링 X
      //console.log(newProps, newState)
      return true;
   }
 
   componentWillUpdate(nextProps, nextState) {       //컴포넌트 업데이트 전
      console.log('Component WILL UPDATE!');
   }
 
   componentDidUpdate(prevProps, prevState) {        //컴포넌트 업데이트 후 (Render 실행 완료)
      console.log('Component DID UPDATE!')
   }
 
   componentWillUnmount() {                          //컴포넌트 언마운트 전
      console.log('Component WILL UNMOUNT!')
   }
 
   render() {
      return (
         <div>
            <h3>{this.props.curNumber}</h3>
         </div>
      );
   }
}
 
export default App;
 

 

 

React[리액트] - 예제 소스 실행

 

브라우저 및 Console 화면

     웹팩Webpack을 사용하면 더욱 편하게 실행 가능하다.

 

 

React[리액트] - 예제 소스(파일) 다운로드

 

다운로드

react-lifecycle.zip

 

  웹팩(webpack)을 추가적으로 공부해보자. 정말 편하게 개발 할 수 있을 것이다.