LifeCycle 메서드

컴포넌트가 브라우저 상에 나타날 때, 업데이트될 때, 제거될 때 호출되는 메서드(API)

import React, { Component } from "react";
 
class LifeCycleSample extends Component {
  state = {
    number: 0,
    color: null
  };
 
  myRef = null; // ref 를 설정 할 부분
 
  constructor(props) {
    super(props);
    console.log("constructor");
  }
 
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }
 
  componentDidMount() {
    console.log("componentDidMount");
  }
 
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate", nextProps, nextState);
    // 숫자의 마지막 자리가 4면 리렌더링하지 않습니다
    return nextState.number % 10 !== 4;
  }
 
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }
 
  handleClick = () => {
    this.setState({
      number: this.state.number + 1
    });
  };
 
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    if (prevProps.color !== this.props.color) {
      return this.myRef.style.color;
    }
    return null;
  }
 
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate", prevProps, prevState);
    if (snapshot) {
      console.log("업데이트 되기 직전 색상: ", snapshot);
    }
  }
 
  render() {
    console.log("render");
 
    const style = {
      color: this.props.color
    };
 
    return (
      <div>
        <h1 style={style} ref={ref => (this.myRef = ref)}>
          {this.state.number}
        </h1>
        <p>color: {this.state.color}</p>
        <button onClick={this.handleClick}>더하기</button>
      </div>
    );
  }
}
 
export default LifeCycleSample;
 
 
 

 

 

 

---

마운트

1. constructor

2. getDerivedStateFromProps

3. render

4. componentDidMount

---

1. construct

  constructor(props) {
    super(props);
    console.log("constructor");
  }
 
 

 

컴포넌트 생성자 함수, 컴포넌트가 처음 만들어질 때 호출되는 함수이다.

super(props) 를 하는 이유는 원래 리액트 컴포넌트 클래스가 지니고 있는 construct 가 있다.

construct를 덮어 씌우는 것.

기존 리액트 컴포넌트라는 클래스가 가지고 있는 construct 를 먼저 호출하고 나서 그다음에 원하는 작업을 실행한다.

주로 하는 작업은 this.state 값을 설정, 메서드에 this를 바인딩 등 할 수 있다.

​

​

2. getDerivedStateFromProps

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
 }

두 가지 파라미터를 받는데 첫 번째는 다음 받아올 props 이고 두 번째는 컴포넌트의 상태를 가리킨다.

다른 메서드와는 달리 앞에 static 을 필요로 하며, 이 안에서는 this 를 조회할 수 없다.nextProps.color 값과 prevState.color 값이 다르면 어떤 객체를 리턴하고 nextProps 값에 반영한다.

props 로 받아온 어떠한 값을 state 에 동기화 시켜주는 역할.사용할 일이 많지 않으며, 이 메서드 대신에 componectDidMount 를 사용할 수도 있다.

 

 

3. render

컴포넌트를 렌더링하는 메서드.

 

4. componentDidMount

  componentDidMount() {
    console.log("componentDidMount");
 }

이 메서드가 호출되는 시점에는 컴포넌트가 브라우저에 나타나있는 상태이다

브라우저에 나타나있는 DOM 바로 직접 접근 및 외부 라이브러리를 호출할 수 있다.

 

---

업데이트

1. getDerivedStateFromProps

2. shouldComponentUpdate

3. render

4. getSnapshotBeforeUpdate

5. componentDidUpdate

---

1. getDerivedStateFromProps

​

2. shouldComponentUpdate

  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate", nextProps, nextState);
    // 숫자의 마지막 자리가 4면 리렌더링하지 않습니다
    return nextState.number % 10 !== 4;
  }

컴포넌트를 최적화해야 되는 단계에서 사용.

만약 이 메서드를 따로 구현하지 않으면 컴포넌트는 언제나 리렌더링한다.

반대로 구현했다면 특정 조건에서 리렌더링하지 않게 된다.

true를 반환하면 렌더링을 하고, false를 반환하면 render 함수가 호출되지 않으면 기존 내용을 계속 보여준다.

 

3. render

 

4. getSnapshotBeforeUpdate

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    if (prevProps.color !== this.props.color) {
      return this.myRef.style.color;
    }
    return null;
  }

브라우저의 변화가 일어나기 직전에 호출되는 메서드.

컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그다음 발생하는 componentDidUpdate 의 세 번째 파라미터를 통하여 리턴 값을 조회할 수 있다.

함수형 컴포넌트에서는 대체할 수 있는 기능이 없다.

 

5. componentDidUpdate

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate", prevProps, prevState);
    if (snapshot) {
      console.log("업데이트 되기 직전 색상: ", snapshot);
    }
  }

리렌더링이 끝나고, 브라우저에 변화가 모두 반영되고 난 뒤 호출되는 메서드.

첫 번째 파라미터는 이전의 props의 값, 두 번째는 이전의 state의 값, 세 번째는 getSnapshotBeforeUpdate 에서 반환 한 return 값이다.

반환하지 않았다면 조회할 수 있는 값이 없다

---

언마운트

1. componentWillUnmount

  componentWillUnmount() {
    console.log("componentWillUnmount");
  }

컴포넌트가 사라지기 바로 직전에 호출되는 메서드.

주로 등록된 이벤트를 제거하거나 setTimeout 작업을 취소 등을 한다.