리액트 컴포넌트 생명주기

윤도훈·2025년 4월 11일

🤒 컴포넌트 생명주기

컴포넌트 생명주기란?

컴포넌트가 화면에 등장하고, 변경되며, 사라지는 과정을 말합니다.
모든 React 컴포넌트는 라이프 사이클 이벤트가 있으며, 라이프사이클 이벤트는 컴포넌트가 수행한 작업이나 앞으로 수행할 작업에 따라 특정 시점에 실행된다.

이 생명주기 동안 특정 메서드들을 사용할 수 있으며, 주로 다음과 같은 3단계로 나뉩니다.

🛠️ 마운트

컴포넌트가 DOM에 삽입될때 발생하며 한 번만 실행된다.

클래스형

constructor() // 초기 state 설정, 바인딩 등
componentDidMount() // 렌더링 완료 후 실행(DOM 접근, API 호출등)
static getDerivedStateFromProps() // props로부터 state를 동기화
render()// jsx 반환

함수형

useEffect(() => {}, [])
// 컴포넌트 처음 렌더링될때 실행

🧭 업데이트

props 또는 state 가 변경될때 실행한다.

클래스형

static getDerivedStateFromProps() // props 변화 감지
shouldComponentUpdate() // 리렌더링 여부 결정
render() // 화면 다시 그림
getSnapshotBeforeUpdate() // DOM 업데이트 전 값을 가져옴
componentDidUpdate() // 업데이트 후 실행(API 재요청 등)

함수형

useEffect(() => {}, [deps])
// 특정 값(deps)가 변경될때 실행

😵 언마운트

컴포넌트가 DOM에서 제거될때 발생한다.

클래스형

componentWillUnmount() // 타이머 정리, 이벤트 정리 등 컴포넌트 종료 수행

함수형

useEffect(() => { return () => {} }, [])
//컴포넌트가 사라질때 정리해주는 작업으로 처리된다

📚 정리

다음과같이
컴포넌트가 처음 나타날 때 API 요청을 보내고 싶거나,
데이터가 변경될 때마다 무언가를 처리하고 싶거나,
컴포넌트가 사라질 때 정리를 하고 싶을때 사용할 수 있어요.

클래스형은 사용할 메서드들이 많지만
함수형에서는 훅으로 다 처리할 수 있기때문에 편리하다.
그렇기 때문에 클래스형 컴포넌트보다는 함수형 컴포넌트가 더 권장되고있다.

💨 Hooks을 이용해 생명주기 관리

useEffect(() => {
  // 마운트 시 실행 (처음 1회만)
  return () => {
    // 언마운트 시 실행
  };
}, []); // 업데이트 조건

🛠️ 마운트

import React, { useEffect } from 'react';

function Welcome() {
  useEffect(() => {
    console.log('컴포넌트가 마운트되었습니다!');
    // API 요청, 초기 설정 등
  }, []);

  return <h1>환영합니다!</h1>;
}

초기 렌더링 되었을때 useEffect 안의 내용을 실행한다.

🧭 업데이트

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

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

  useEffect(() => {
    console.log(`🔄 count가 ${count}로 변경됨`);
  }, [count]); // count가 바뀔 때마다 실행됨

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

useEffect의 의존성배열([count])에 count 값을 넣어두어서 해당 값이 바뀌어서
재렌더링될때 useEffect가 다시 실행되게 된다.

😵 언마운트

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log('⏰ 매초 실행 중...');
    }, 1000);

    return () => {
      clearInterval(id); // 컴포넌트가 사라질 때 타이머 제거
      console.log('🧹 컴포넌트가 언마운트됨. 타이머 제거 완료!');
    };
  }, []);

  return <p>타이머가 작동 중입니다.</p>;
}