[React다루는기술] 09. React Life cycle

in React on React 다루는 기술


리액트 컴포넌트의 라이프사이클은 컴포넌트가 생성되고 제거되기까지의 여러 단계에 걸친 메서드들을 나타냅니다. 리액트 라이프사이클은 세 가지 주요 단계로 나눌 수 있습니다:


1. 리액트 라이플사이클

  1. 마운팅(Mounting): 컴포넌트가 생성되고 DOM에 삽입될 때의 단계입니다.
  2. 업데이트(Updating): 컴포넌트의 상태나 속성이 변경되어 리렌더링이 필요한 경우의 단계입니다.
  3. 언마운팅(Unmounting): 컴포넌트가 DOM에서 제거되기 전의 단계입니다.

각 단계에서 실행되는 라이프사이클 메서드들이 있습니다. 주요한 라이프사이클 메서드들은 다음과 같습니다.


마운팅(Mounting)

  1. constructor(): 컴포넌트가 생성될 때 호출되는 메서드입니다. 초기 상태를 설정하거나 메서드를 바인딩할 때 주로 사용됩니다.
  2. static getDerivedStateFromProps(): 컴포넌트가 생성될 때와 업데이트될 때 호출되는 메서드입니다. props에 있는 값을 state에 넣을 때 사용하는 메서드이다.
  3. render(): 컴포넌트의 UI를 렌더링하는 메서드입니다.
  4. componentDidMount(): 컴포넌트가 DOM에 삽입된 후에 호출되는 메서드입니다. 초기 데이터 로딩이나 외부 리소스를 가져올 때 주로 사용됩니다.


업데이트(Updating)

  1. static getDerivedStateFromProps(): 마운팅 단계에서와 마찬가지로 props의 변화에 따라 state값 변화를 주고 싶을 때 사용한다.
  2. shouldComponentUpdate(): 컴포넌트가 업데이트될 때 호출되는 메서드로, 리렌더링 여부를 결정할 때 사용됩니다. 특정 함수에서 this.forceUpdate() 함수를 호출하다면 이 과정을 생략하고 바로 render 함수를 호출합니다.
  3. render(): 컴포넌트를 리렌더링합니다.
  4. getSnapshotBeforeUpdate(): 컴포넌트가 리렌더링이 발생하기 직전에 호출되며, 변경 전의 DOM 상태를 기반으로 작업을 수행할 수 있습니다.
  5. componentDidUpdate(): 리렌더링이 완료된 후에 호출되는 메서드입니다. 컴포넌트의 업데이트 이후의 호출하는 메서드이다.


언마운팅(Unmounting)

  1. componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 전에 호출되는 메서드입니다. 이벤트 리스너를 제거하거나 타이머를 멈추는 등의 정리 작업을 수행할 때 사용됩니다.

이 외에도 라이프사이클에는 여러 다른 메서드들이 있습니다. 주의해야 할 점은 일부 라이프사이클 메서드가 최신 버전의 리액트에서는 사용이 권장되지 않거나(deprecated) 혹은 더 이상 호출되지 않을 수 있습니다. 따라서 공식 문서를 참고하여 사용하는 것이 좋습니다. 또한, 함수형 컴포넌트에서는 useEffect 훅을 사용하여 라이프사이클과 관련된 작업을 처리할 수 있습니다.



2. 리액트 라이플사이클 컴포넌트 예제

import React, { Component } from "react";

class ReactLifeCycle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      seconds: 0,
    };
    console.log("1. constructor");
  }

  componentDidMount() {
    console.log("3. componentDidMount");
    // 컴포넌트가 DOM에 마운트된 후에 실행되는 로직을 작성
    this.intervalId = setInterval(() => {
      this.setState((prevState) => ({
        seconds: prevState.seconds + 1,
      }));
    }, 1000);
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("4. shouldComponentUpdate");
    // 리렌더링 여부를 결정하는 로직을 작성
    return nextState.seconds % 3 === 0;
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("6. componentDidUpdate");
    // 컴포넌트가 업데이트된 후에 실행되는 로직을 작성
  }

  componentWillUnmount() {
    console.log("7. componentWillUnmount");
    // 컴포넌트가 언마운트되기 전에 실행되는 로직을 작성
    clearInterval(this.intervalId);
  }

  render() {
    console.log("2. render");
    return <div>{this.state.seconds} seconds</div>;
  }
}

export default ReactLifeCycle;