리액트 생명주기 - React class life-cycle method & control

일반적인 React life-cycle

주요 life-cycle method()

method	설명
constructor()	마운트 되기 전 실행
render()	class component에 필수 메소드이며, 브라우저와 상호작용하지 않음
componentDidMount()	마운트 렌더가 완료되었을 때
componentDidUpdate()	업데이트 렌더가 완료되었을 때
componentWillUnmount()	DOM에서 제거될 때

• 주의점: Update 메소드에서 state나 props를 변경하면 다시 업데이트가 진행되면서 무한 루프가 적용되므로 사용하면 안된다.

코드 예시

import React, { Component } from 'react'
var classStyle = 'color:red';

class ClassComp extends React.Component {
  state = {
    number:this.props.initNumber,
    date:(new Date()).toString()
  }
  UNSAFE_componentWillMount(){
    console.log('%cclass => componentWillMount', classStyle)
  }
  componentDidMount(){
    console.log('%cclass => conponentDidMount', classStyle)
  }
  shouldComponentUpdate(nextProps, nextState){
    console.log('%cclass => shouldComponentUpdate', classStyle)
    return true
  }
  UNSAFE_componentWillUpdate(nextProps, nextState){
    console.log('%cclass => componentWillUpdate', classStyle)
  }
  componentDidUpdate(nextProps, nextState) {
    console.log("%cclass => componentWillUnmount", classStyle)
  }
  conponentWillUnmount(){
    console.log("%cclass => componentWillUnmount", classStyle)
  }
  render() {
    console.log('%cclass => render', classStyle)
    return(
      <div className="container">
        <h2>class style Component</h2>
        <p>Number: {this.state.number}</p>
        <p>Time : {this.state.date}</p>
        <input type="button" value="random" onClick={function(){
          this.setState({number:Math.random()})
        }.bind(this)}/>
        <input type="button" value="date" onClick={function(){
          this.setState({date: (new Date()).toString()})
        }.bind(this)}/>
      </div>
    )
  }
}
export default ClassComp;

 

 

상세 순서

Mount Method (DOM 상에 삽입될 때에 순서대로 호출)

constructor()

static getDerivedStateFromProps()

UNSAFE_componentWillMount()

render()

componentDidMount()

Update Method(props, state 변경되면 순서대로 호출)

static getDerivedStateFromProps()

shouldComponentUpdate()

UNSAFE_componentWillUpdate()

render()

getSnapshotBeforeUpdate()

componentDidCatch()

마운트 해제(DOM에서 제거될 때 호출)

componentWillUnmount()

오류 처리(오류 발생시 호출)

static getDerivedStateFromError()

componentDidCatch()

React lifecycle

 

---

특정 메소드의 변경

 

최신 문법의 메소드

참초

life-cycle photo - https://www.wikitechy.com/tutorials/react/reactjs-component-life-cycle

학습영상 생활코딩 - https://www.youtube.com/playlist?list=PLuHgQVnccGMCEfBwnNGsJCQDiqSWI-edj

생명주기 메소드 - https://ko.reactjs.org/docs/react-component.html#commonly-used-lifecycle-methods