React 생명주기(Lifecycle) 이해하기

React에서 컴포넌트는 마치 사람처럼 "태어나고", "변하고", "떠나는" 과정이 있다.

리액트에서는 이 과정을 생명주기라고 부르며,

React의 컴포넌트 생명주기는 크게 세 단계로 나뉜다.

 

1. Mount(태어남) - 컴포넌트가 화면에 나타나는 단계

2. Update(변화함) - 컴포넌트의 상태(state)나 속성(props)이 변할 때 업데이트되는 단계

3. unMount(떠남) - 컴포넌트가 화면에서 사라질 때

 

각 단계에서 특정메서드가 호출되며, 이 메서드들을 통해 컴포넌트가 생명주기의 각 단계에서 어떻게 동작할지 정의할 수 있다.

 

이제 각 단계에 대해서 자세히 말아보자

 

1. 마운트(Mount)

React컴포넌트가 처음 만들어져서 화면에 나타나는 단계에다.

예시: 쇼핑몰 메인페이지에서 상품 목록을 처음 불러올 때

- componentDidMount메서드를 사용해서 데이터(상품 정보)를 서버에서 가져온다.

import React, { Component } from 'react';

class ProductList extends Component {
  state = {
    products: []
  };

  componentDidMount() {
    // 컴포넌트가 화면에 처음 나타날 때 실행됨
    fetch('/api/products')
      .then(response => response.json())
      .then(data => this.setState({ products: data }));
  }

  render() {
    return (
      <ul>
        {this.state.products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    );
  }
}

 

위 예제를 보면 componentDidMount는 컴포넌트가 화면에 딱 나타날 때 실힝되서 서버에서 데이터를 가지고와서 products에 data배열을 채우게 된다.

 

주요 메서드

• constructor : 컴포넌트가 생성될 때 한 번 호출된다 초기 state를 설정하거나 메서드를 바인딩할 때 주로 사용된다.
• getDerivedStateFromProps:props로 부터 state를 파생해야 할 경우에 사용된다. static메서드로서 props가 변경될 때마다 호출된다.
• render:DOM에 JSX를 그리기 위해 사용되는 메서드이다. 반드시 순수 함수로 작성되어야 하며, JSX요소를 반환한다.
• componentDidMount : 컴포넌트가 DOM에 렌더링된 직후에 호출된다. 이 메서드에서 데이터 로딩이나 외부 API 호출등을 수행할 수 있다.

 

2. 업데이트(Update)

컴포넌트의 state 또는 props가 변경될 때마다 발생하는 과정이다.

예시 : 장바구니 버튼을 눌러 상품을 추가 했을 때 장바구니 상태가 업데이트 되는 경우

componentDidUpdate메서드를 사용해 장바구니 상태가 변할 때마다 서버에 알려줄 수 있다.

class ShoppingCart extends Component {
  state = {
    cart: []
  };

  addToCart(product) {
    this.setState(prevState => ({
      cart: [...prevState.cart, product]
    }));
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.cart !== this.state.cart) {
      // 장바구니가 업데이트될 때 서버에 상태를 저장하는 요청을 보낼 수 있음
      console.log("Updated cart:", this.state.cart);
    }
  }

  render() {
    return (
      <div>
        <button onClick={() => this.addToCart({ name: "상품 A" })}>
          Add 상품 A
        </button>
      </div>
    );
  }
}

 

여기서 componetDidUpdate는 장바구니가 변할 때마다 실행되어, 장바구니 정보를 서버에 보내도록 할 수 있다.

 

 

주요 메서드

• getDerivedStateFromProps : 마운트와 업데이트 단계 모두에서 호출되며, props로부터 새로운 state를 설정해야 할 경우에 사용된다.
• shouldComponentUpdate : 컴포넌트가 리렌더링할지 여부를 결정하느 메서드이다. 기본적으로 true를 반환하여 리렌더링 되지만, 특정 조건에서 false를 반환하여 성능을 최적화할 수 있다.
• render : 변경된 상태에 따라 다시 호출되어 JSX를 업데이트한다.
• getSnapshotBeforeUpdate : 실제 DOM이 업데이트되기 직전에 호출된다. 이전 상태가 스크롤 위치 등 DOM 변경 이전의 정보를 저장하고 싶을 때 사용된다.
• componentDidUpdate : DOM이 실제로 업데이트된 후에 호출된다. 주로 네트워크 요청 후에 특정 작업을 수행할 때 유용하다.

 

3. 언마운트(Unmount)

컴포넌트가 더 이상 필요 없어 사라지는 단계 즉 DOM에서 제거될 때 발생한다.

예시 : 장바구니 페이지를 떠나 다른 페이지로 이동할때 장바구니에 타이머 같은 불필요한 리소스 정리하는 경우

 

class Timer extends Component {
  componentDidMount() {
    this.interval = setInterval(() => {
      console.log("타이머 실행 중...");
    }, 1000);
  }

  componentWillUnmount() {
    // 페이지를 떠날 때 타이머를 정리하여 메모리 누수를 방지
    clearInterval(this.interval);
  }

  render() {
    return <div>타이머가 실행 중입니다.</div>;
  }
}

 

여기서 componentWillUnmount는 타이머가 계속 실행되지 않도록 타이머를 해제하는 역할을 한다.

 

 

주요 메서드

• componentWillUnmount : 컴포넌트가 제거되기 직전에 호출된다. 이벤트 리스너나 타이머 정리 등 필요한 정리 작업을 수행하느데 사용된다.