[TIL] React 중급: 클래스형 컴포넌트의 라이프-사이클 구현

6. Class Component: Life-cycle 구현

• 클래스형 컴포넌트의 라이프 사이클(기본)

  

  1. componentWillMount
  2. render
  3. componentDidMount

• 클래스형 컴포넌트의 라이프 사이클(확장)

  

  1. componentWillMount
  2. render
  3. componentDidMount

  ❗ 화면에 출력할 값이 변경되는 이벤트 동작 후

  1. shouldComponentUpdate
  2. componentWillUpdate
  3. render
  4. componentDidUpdate

• 클래스형 컴포넌트 코드

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