[React] React 수명주기(Lifecycle)

1. 컴포넌트의 수명주기

 - React의 컴포넌트에는 세 가지 주요 단게에서 모니터링하고 조작할 수 있는 수명주기가 있다.

• 마운트 (Mounting)

• 업데이트 (Updating)

• 마운트 해제 (UnMounting)

 

2. 마운트 (Mounting)

 - 마운트는 컴포넌트를 DOM에 넣는 것을 말한다.

 - React에는 컴포넌트를 마운트할 때 순서대로 호출되는 4개의 내장 함수가 있다.

1. constructor()

2. getDerivedStateFromProps()

3. render()

4. componentDidMount()

 - render() :

   필수적이고 항상 호출된다. (HTML을 DOM에 출력하는 함수)

   다른 함수는 선택사항이고 정의할 경우 호출된다.

 - constructor() :

   컴포넌트가 초기화될 때 다른 것보다 먼저 호출되며 state와 초기 값을 설정하는 부분.

   props를 인수로 사용하여 호출되며 항상 다른 코드보다 먼저 super(props)를 호출하며 시작해야한다.

 - getDerivedStateFromProps() :

   DOM에서 렌더링하기 직전에 호출된다.

   초기 props를 바탕으로 state 객체를 설정한다.

   매개변수로 props, 반환 값으로 state가 변경된 객체를 반환한다.

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

 - componentDidMount() 함수는 컴포넌트가 리-렌더링되는 후 호출된다.

   (이미 DOM에 컴포넌트가 배치되어 있어야한다.)

 

3. 업데이트 (Updating)

 - 구성 요소의 state 및 props가 업데이트 될때마다 컴포넌트는 업데이트된다.

 - React에는 컴포넌트가 업데이트될 때 다음 5개의 순서로 호출되는 내장 함수가 있다.

1. getDerivedStateFromProps()

2. shouldComponentUpdate()

3. render()

4. getSnapshotBeforeUpdate()

5. componentDidUpate()

 - getDerivedStateFromProps() :

   이 함수 또한 update에서 호출된다.

 - shouldComponentUpdate() :

   React가 렌더링을 계속해야하는지 여부를 Boolean 값으로 반환한다. (기본 값 : true)

   아래 예제에서는 false / true 값일 때 어떻게 동작하는지 보여준다.

// 버튼을 눌러도 값이 변경되지 않음.
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

// 버튼을 누르면 값이 변경됨.
import React from 'react';
import ReactDOM from 'react-dom';

class Header extends React.Component {
    constructor(props) {
      super(props);
      this.state = {favoritecolor: "red"};
    }
    shouldComponentUpdate() {
      return true;
    }
    changeColor = () => {
      this.setState({favoritecolor: "blue"});
    }
    render() {
      return (
        <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <button type="button" onClick={this.changeColor}>Change color</button>
        </div>
      );
    }
  }
  
  ReactDOM.render(<Header />, document.getElementById('root'));

 - render() :

   컴포넌트가 update될 때 호출된다.

   새로운 변경 사항으로 HTML을 DOM에 리-렌더링한다.

 - getSnapshotBeforeUpdate() :

   업데이트 전의 props 및 state에 접근할 수 있다. (업데이트 후에도 업데이트 전의 값을 확인할 수 있다.)

   getSnapshotBeforeUpdate()가 있는 경우 componentDidUpate() 또한 포함되어야 한다.

   아래의 예는 <h1>에 표시되는 'red'가 컴포넌트 마운트 1초 후 yellow로 변경된다.

   div1에는 이전 'red'를 표시하고, componentDidUpdate() 함수가 실행되어 div2에 메시지를 입력한다.

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

 

4. 언마운트 (Unmounting)

 - React에는 컴포넌트의 마운트 해제에서 호췰되는 하나의 내장 함수가 있다.

1. componentWillUnmount()

 - componentWillUnmount() :

   컴포넌트가 DOM에서 제거 되려고 할 때 호출된다.

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }
  delHeader = () => {
    this.setState({show: false}); // 버튼을 누르면
  }
  render() {
    let myheader;
    if (this.state.show) {
      // myheader에 <Child /> 객체가 넣어지지 않음
      myheader = <Child />;
    };
    return (
      <div>
      {myheader} // myheader unmount
      <button type="button" onClick={this.delHeader}>Delete Header</button>
      </div>
    );
  }
}

class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

ReactDOM.render(<Container />, document.getElementById('root'));