React Life cycle Methods

Life Cycle Methods

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

componentDidMount()

  Component가 생성되면 다음과 같은 순서대로 실행된다.

• constructor
• render
• componentDidMount()

  ComponentDidMount()는 component가 생성되면 실행되는 method다.

componentDidUpdate()

 Component가 생성되면 다음과 같은 순서대로 실행된다.

• constructor
• render
• componentDidMount()

 ComponentDidMount()는 component가 생성되면 실행되는 method다.

componentDidUpdate()

  props나 state가 변경될 때마다 실행된다.

• render
• componentDidUpdate()

componentWillUnmount()

  Component가 죽으면 실행되는 method다.

참고 자료

• 노마드 코더의 React 멤버쉽 강의
• React Life Cycle Method

소스 코드

github.com/zpskek/Nomflix-v2/commit/d559a4ac0a3536f4a9a184a94b65084c740e8449