[React] 라이프사이클(Lifecycle)에 대해서

React Component의 라이프사이클(Lifecycle)이란?

컴포넌트가 생성 - 업데이트 - 제거되는 과정을 의미한다.

React에서는 컴포넌트가 이 과정을 통해 초기화되고 데이터가 변경될 때 다시 렌더링되며 필요할 때 제거된다.

 

라이프사이클은 각각의 단계에서 특정 메서드를 호출하여 필요한 작업을 수행할 수 있게 한다.

주로 클래스형 컴포넌트에서 사용했으나 React 16.8 이후로 함수형 컴포넌트에서 Hooks를 통해 라이프사이클을 처리할 수 있게 되었다.

React 라이프사이클은 컴포넌트가 언제 생성되고 업데이트되고 제거되는 지를 이해하는 데 매우 중요하다.

 

React Lifecycle 단계

React 컴포넌트의 라이프사이클은 크게 세 가지로 나눌 수 있다.

1. 마운트 (Mount) : 컴포넌트가 처음 DOM에 추가되는 단계
2. 업데이트 (Update) : 컴포넌트가 상태(state) 또는 props가 변경될 때 리렌더링되는 단계
3. 언마운트 (Unmount) : 컴포넌트가 DOM에서 제거되는 단계

각 단계에는 특정한 라이프사이클 메서드가 존재하며 이건 클래스형 컴포넌트에서만 사용할 수 있다.

 

 

1. 마운트(Mount)

컴포넌트가 생성되어 DOM에 삽입될 때 호출되는 메서드이다.

• constructor(props)
  • 컴포넌트가 생성될 때 가장 먼저 호출되는 메서드
  • 초기 상태를 설정하거나 메서드를 바인딩하는 데 사용

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

 

• static getDerivedStateFromProps(props, state)
  • props로부터 파생된 state를 업데이트하기 위해 호출
  • 컴포넌트가 마운트되거나 업데이트될 때 호출

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.value !== prevState.value) {
    return { value: nextProps.value };
  }
  return null;
}

 

• render()
  • 컴포넌트의 UI를 렌더링
  • JSX를 반환하며 이 메서드는 순수 함수처럼 동작
  • 상태를 변경하지 않고 DOM에 접근하지 않으며 브라우저에 영향을 주면 안된다.
• componentDidMount()
  • 컴포넌트가 처음 렌더링되고 DOM에 마운트된 직후에 호출
  • DOM 요소를 조작하거나 외부 API 호출과 같은 초기화 작업에 자주 사용

componentDidMount() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
}

 

 

2. 업데이트(Update)

컴포넌트가 상태(state) 또는 props가 변경될 때 호출되는 메서드이다.

• static getDerivedStateFromProps(props, state)
  • 마운트 시에도 호출되지만 업데이트 시에도 호출되어 props로부터 파생된 state를 업데이트
• shouldComponentUpdate(nextProps, nextState)
  • 컴포넌트가 업데이트될지 말지를 결정하는 메서드
  • 기본적으로 true를 반환하지만 성능 최적화를 위해 특정 조건에서 false를 반환하도록 커스터마이징 가능

shouldComponentUpdate(nextProps, nextState) {
  return nextState.value !== this.state.value;
}

 

• render()
  • 이전과 동일하게 컴포넌트를 렌더링
• getSnapshotBeforeUpdate(prevProps, prevState)
  • 컴포넌트의 변경사항이 DOM에 반영되기 직전에 호출
  • 이 메서드는 예외적으로 값을 반환할 수 있으며 그 값은 componentDidUpdate로 전달

getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevProps.list.length < this.props.list.length) {
    return this.listRef.scrollHeight;
  }
  return null;
}

 

• componentDidUpdate(prevProps, prevState, snapshot)
  • 컴포넌트가 업데이트된 직후에 호출
  • 이전의 props, state, getSnapshotBeforeUpdate의 반환값을 인수로 받는다.

componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot !== null) {
    this.listRef.scrollTop = this.listRef.scrollHeight - snapshot;
  }
}

 

 

3. 언마운트(Unmount)

컴포넌트가 DOM에서 제거될 때 호출되는 메서드이다.

• componentWillUnmount()
  • 컴포넌트가 DOM에서 제거되기 직전에 호출
  • 타이머 제거, 구독 해제, 외부 라이브러리 정리 등의 작업에 사용

componentWillUnmount() {
  clearInterval(this.timerID);
}

 

 

4. 오류 처리(Error Handling)

React 16부터 도입된 오류 처리 메서드입니다.

• componentDidCatch(error, info)
  • 하위 컴포넌트에서 발생한 JavaScript 오류를 수집하고 오류 경계(Error Boundary)를 생성하는 데 사용

componentDidCatch(error, info) {
  logErrorToService(error, info);
}

 

 

 

함수형 컴포넌트와 Hooks를 사용한 라이프사이클 관리

함수형 컴포넌트에서는 useEffect, useState, useReducer 등의 Hooks를 사용하여 라이프사이클을 관리할 수 있다.

최신 React에서는 함수형 컴포넌트와 Hooks를 사용하는 것이 더 권장되며 더 간결하고 직관적인 코드로 라이프사이클을 관리할 수 있다.

• useEffect
  
  • 두 번째 인자로 빈 배열 [ ]을 전달하면 마운트와 언마운트 시 한 번씩만 실행
  • 두 번째 인자로 특정 상태나 props를 배열로 전달하면 해당 값이 변경될 때마다 실행
  • componentDidMount, componentDidUpdate, componentWillUnmount를 모두 대체 가능

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('컴포넌트가 마운트되었을 때 실행');
    return () => {
      console.log('컴포넌트가 언마운트될 때 실행');
    };
  }, []);

  useEffect(() => {
    console.log('count가 변경될 때마다 실행');
  }, [count]);

  return (
    <div>
      <p> Count: {count} </p>
      <button onClick={() => setCount(count + 1)}> Increment </button>
    </div>
  );
}

 

 

---

⭐️ 함수형 컴포넌트와 클래스형 컴포넌트에 대해서 더 공부하고 싶다면?

[React] 함수형 컴포넌트와 클래스형 컴포넌트