React의 생명 주기 메서드에 대해 설명해주세요.

답변

React의 생명 주기 메서드는 컴포넌트가 생성되고, 업데이트되고, 소멸되는 과정에서 특정 시점에 실행되는 메서드를 말합니다. 클래스형 컴포넌트에서 주로 사용되며, 함수형 컴포넌트에서는 useEffect 훅으로 대체됩니다.

 

개념 정리

생명 주기의 3단계:

1. 마운트(Mounting): 컴포넌트가 처음 DOM에 삽입될 때 실행되는 과정입니다.
   • 주요 메서드: constructor(), componentDidMount()
2. 업데이트(Updating): 컴포넌트가 상태(state)나 props가 변경되어 리렌더링될 때 실행됩니다.
   • 주요 메서드: shouldComponentUpdate(), componentDidUpdate()
3. 언마운트(Unmounting): 컴포넌트가 DOM에서 제거될 때 실행되는 과정입니다.
   • 주요 메서드: componentWillUnmount()

함수형 컴포넌트에서 어떻게 대체되는지?

componentDidMount() 대체하기

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 컴포넌트가 마운트된 후 실행
    console.log('컴포넌트 마운트');
    // 예: API 호출, 구독 설정
  }, []); // 빈 배열을 의존성으로 전달 (한 번만 실행)
  
  return <div>My Component</div>;
}

의존성 배열을 빈 배열로 두어 컴포넌트가 처음 마운트 되었을 때를 처리함

conponentDidUpdate 대체하기

import { useEffect, useState } from 'react';

function MyComponent({ count }) {
  useEffect(() => {
    // count가 변경될 때 실행
    console.log(`Count가 ${count}로 변경되었습니다.`);
  }, [count]); // count가 변경될 때 실행

  return <div>Count: {count}</div>;
}

상태나 props 값이 변경될 때 실행되는 conponentDidUpdate 대신 useEffect의 의존성 배열에 특정 값을 추가한다.

componentWillUnmount 대체하기

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 마운트 시 실행
    console.log('컴포넌트 마운트');

    // 언마운트 시 실행될 코드 (정리 함수)
    return () => {
      console.log('컴포넌트 언마운트');
      // 예: 구독 취소, 타이머 정리
    };
  }, []); // 빈 배열: 처음 마운트 시에만 실행

  return <div>My Component</div>;
}

componentWillUnmount는 컴포넌트가 언마운트될 때 실행되는 함수이므로 useEffect안에 return 문으로 대체할 수 있다.

return 문 안에는 컴포넌트가 언마운트되기 직전에 수행할 작업을 작성한다.