리액트를 다루는 기술 - 컴포넌트의 라이프사이클 메서드

라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드입니다.

이 메서드들은 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용합니다.

추가로 컴포넌트 업데이트 성능을 개선할때는 shouldComponentUpdate가 중요하게 사용됩니다.

출처 - https://intzzzero.netlify.app/blog/react-lifecycle

라이프사이클 메서드는 9종류

Will 접두사는 어떤 작업을 작동하기 전에 실행되는 메서드 / Did 접두사는 어떤 작업을 작동한 후 실행되는 메서드

이 메서드들은 우리가 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있습니다.

 

Mount : Dom이 생성되고 웹 브라우저상에 나타나는 것

constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 ↓ getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 (📌가장 헷갈림) ↓ render : 우리가 준비한 UI를 랜더링하는 메서드 ↓ componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

 

 

Update : 아래 4가지 경우에 업데이트

- props가 바뀔때

- state가 바뀔때

- 부모 컴포넌트가 리렌더링될 때

- this.forceUpdate로 강제로 렌더링을 트리거할 때

getDerivedStateFromProps : 이 메서드는 마운트 과정에서도 호출되며, 업데이트가 시작하기 전에도 호출. props의 변화에 따라 state 값에도 변화를 주고 싶을때 사용 ↓ shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드. 이 메서드에서는 true/false 값을 반환 - true 반환시 다음 라이프사이클 메서드를 계속 실행 - false 반환시 작업 중지 (즉, 컴포넌트가 리렌더링 되지 않음) 만약 특정함수에서 this.forceUpdate() 함수를 호출한다면, 이 과정을 생략하고 render 함수를 호출 ↓ render : 컴포넌트를 리렌더링 ↓ getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 직전에 호출하는 메서드. ↓ componentDidUdpate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

 

 

Unmount : Mount의 반대과정. 컴포넌트를 DOM에서 제거하는 것을 언마운트라고 한다.

componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출

 

 

예시 코드

import { Component } from "react";

class LifeCycleSample extends Component {
  state = {
    number: 0,
    color: null,
  };

  myRef = null;

  //constructor :  컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
  constructor(props) {
    super(props);
    console.log("constructor");
  }

  //getDerivedStateFromProps :  이 메서드는 마운트 과정에서도 호출되며, 업데이트가 시작하기 전에도 호출.
  // props로 받아 온 값을 state에 동기화시키는 용도로 사용
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }

  // componentDidMount : 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행
  // 이 안에서 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출, 이벤트 등록, setTimeout, setInterval
  // 네트워크 요청 같은 비동기 작업 처리
  componentDidMount() {
    console.log("componentDidMount");
  }

  // shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드.
  // props or state를 변경시, 리렌더링을 시작할지 여부를 지정하는 메서드.
  // 기본 true 값을 반환하며, false 반환시 업데이트 과정은 여기서 중지 ( 성능 최적화, 리렌더링 방지시 false 반환)
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate", nextProps, nextState);
    return nextState % 10 !== 4;
  }

  // componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출
  // componetDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM을 여기서 제거 작업을 해야함.
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }

  handleClick = () => {
    this.setState({ number: this.state.number + 1 });
  };

  // getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 직전에 호출하는 메서드.
  // 업데이트하기 직전의 값을 참고할 일이 있을 때 활용.
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    if (prevProps.color !== prevState.color) {
      return this.myRef.style.color;
    }
    return null;
  }

  // componentDidUdpate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드
  // prevProps, prevState를 사용해 컴포넌트가 이전에 가졌던 데이터에 접근
  // getSnapshopBeforeUpdate에서 반환한 값이 있다면 여기서 snapshot 값을 전달 받을 수 있음.
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate");
    if (snapshot) {
      console.log("업데이트되기 직전 색상: ", snapshot);
    }
  }

  render() {
    console.log("render");
    const style = {
      color: this.props.color,
    };

    return (
      <>
        {this.props.missing.value}
        <h1
          style={style}
          ref={(ref) => {
            this.myRef = ref;
          }}
        >
          {this.state.number}
        </h1>
        <p>{this.state.color}</p>
        <button onClick={this.handleClick}>더하기</button>
      </>
    );
  }
}
export default LifeCycleSample;