Component Lifecycle

이 글은 React Component의 Lifecycle에 관한 개념 및 메소드를 정리하기 위해 작성하였습니다.

---

< The Component Lifecycle >

We’ve seen that React components can be highly dynamic. They get created, rendered, added to the DOM, updated, and removed. All of these steps are part of a component’s lifecycle.

Each component instance has its own lifecycle.

 

The component lifecycle has three high-level parts :

1. Mounting, when the component is being initialized and put into the DOM for the first time.
2. Updating, when the component updates as a result of changed state or changed props.
3. Unmounting, when the component is being removed from the DOM.

 

&amp;amp;amp;amp;lt; Component Lifecycle &amp;amp;amp;amp;gt;

 

Reference : Component Lifecycle

React.Component – React

 

---

< Introduction to Lifecycle Methods >

React components have several methods, called lifecycle methods, that are called at different parts of a component’s lifecycle.

 

Two of the most common lifecycle methods :
1. constructor( ) is the first method called during the mounting phase.
2. render( ) is called later during the mounting phase, to render the component for the first time, and during the updating phase, to re-render the component.

-> Notice that lifecycle methods don’t necessarily correspond one-to-one with part of the lifecycle. constructor() only executes during the mounting phase, but render() executes during both the mounting and updating phase.

 

(Remember: the constructor is the first thing called during mounting. render() is called later, to show the component for the first time. If it happened in a different order, render() wouldn’t have access to this.state, and it wouldn’t work.)

 

ex)

import React from 'react';
import ReactDOM from 'react-dom';

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

  render() {
    return <div>{this.state.date.toLocaleTimeString()}</div>
  }
}

ReactDOM.render(<Clock />, document.getElementById('app'));

 

---

< componentDidMount >

componentDidMount( ) is the final method called during the mounting phase.

The order is:
1. constructor( )
2. render( )
3. componentDidMount( )

 

In Practice)

We’ve made a clock component, but it’s static. Wouldn’t it be nice if it updated?

Ultimately, we’d like to update this.state.date with a new date once per second.

const oneSecond = 1000;
setInterval(() => {
  this.setState({ date: new Date() });
}, oneSecond);

: setInterval( ) lets us run a function on a set interval.

 

So, where should we put this code? In other words, where in the component’s lifecycle should it go?

1. It’s certainly not in the Unmounting phase—we don’t want to start our interval when the clock disappears from the screen!
2. It’s also probably not useful during the Updating phase—we want the interval to start as soon as the clock appears, and we don’t want to wait for an update. It probably makes sense to stick this code somewhere in the mounting phase.

-> So, we should put this code in Mounting phase. and after render( ) function!

 

ex)

import React from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return <div>{this.state.date.toLocaleTimeString()}</div>;
  }
  componentDidMount() {
    const oneSecond = 1000;
    setInterval(() => {
      this.setState({ date: new Date() });
    }, oneSecond);
  }
}

ReactDOM.render(<Clock />, document.getElementById('app'));

 

 

---

< componentWillUnmount >

componentWillUnmount( ) is called in the unmounting phase, right before the component is completely destroyed(unmounted).
It’s a useful time to clean up any of your component’s mess.

 

In Practice)

Our clock is working, but it has an important problem. We never told the interval to stop, so it’ll keep running that function forever, even when the component is unmounted (or at least, until the user leaves/refreshes the page).

: In general, when a component produces a side-effect, you should remember to clean it up.

const oneSecond = 1000;
this.intervalID = setInterval(() => {
  this.setState({ date: new Date() });
}, oneSecond);
 
// Some time later...
clearInterval(this.intervalID);

: So, we use clearInterval( ) function to clean side-effect up.

 

ex)

import React from 'react';

export class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return <div>{this.state.date.toLocaleTimeString()}</div>;
  }
  componentDidMount() {
    const oneSecond = 1000;
    this.intervalID = setInterval(() => {
      this.setState({ date: new Date() });
    }, oneSecond);
  }
  componentWillUnmount() {
    clearInterval(this.intervalID);
  }
}

 

 

---

< componentDidUpdate >

An update is caused by changes to props or state.

When a component updates, it calls several methods, but only two are commonly used.
1. The first is render( ). When a component’s props or state changes, render( ) is called.
2. The second, which we haven’t seen yet, is componentDidUpdate( ). Just like componentDidMount( ) is a good place for mount-phase setup, componentDidUpdate() is a good place for update-phase work.

 

ex)

import React from 'react';

export class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return (
      <div>
        {this.props.isPrecise
          ? this.state.date.toISOString()
          : this.state.date.toLocaleTimeString()}
      </div>
    );
  }
  startInterval() {
    let delay;
    if (this.props.isPrecise) {
      delay = 100;
    } else {
      delay = 1000;
    }
    this.intervalID = setInterval(() => {
      this.setState({ date: new Date() });
    }, delay);
  }
  componentDidMount() {
    this.startInterval();
  }
  componentDidUpdate(prevProps) {
    if (this.props.isPrecise === prevProps.isPrecise) {
      return;
    }
    clearInterval(this.intervalID);
    this.startInterval();
  }
  componentWillUnmount() {
    clearInterval(this.intervalID);
  }
}