2026-02-25

React의 생명주기 (Lifecycle)

생명주기란

React 컴포넌트는

1. 생성되고 (Mount)
2. 업데이트되고 (Update)
3. 제거된다 (Unmount)

⇒ 이 과정을 생명주기(Lifecycle)

클래스형 컴포넌트 생명주기 (구버전 방식)

• Mount (처음 화면에 나타날 때)

  componentDidMount();
  

  • 최초 렌더링 후 실행
  • API 요청
  • 이벤트 등록
  • 타이머 시작

• Update (props/state 변경 시)

  componentDidUpdate(prevProps, prevState);
  

  • 상태 변경 후 실행
  • 조건부 로직 필요

• Unmount (화면에서 사라질 때)

  componentWillUnmount();
  

  • 이벤트 제거
  • 타이머 정리
  • 메모리 누수 방지

⇒ 현재는 클래스형보다 함수형이 표준

함수형 컴포넌트 생명주기 (Hooks 기반)

함수형 컴포넌트에서는 useEffect 하나로 생명주기를 관리한다.

• Mount

  useEffect(() => {
    console.log("마운트");
  }, []);
  

  • 빈 배열 []
  • 최초 렌더링 후 한 번만 실행

• Update

  useEffect(() => {
    console.log("count 변경");
  }, [count]);
  

  • 의존성 배열에 값 추가
  • 해당 값이 변경될 때 실행

• Unmount

  useEffect(() => {
    return () => {
      console.log("언마운트");
    };
  }, []);
  

  • return 함수가 정리(cleanup)
  • 컴포넌트 제거 시 실행

• 정리 구조 | 단계 | 클래스형 | 함수형 | | ——- | ——————– | —————– | | Mount | componentDidMount | useEffect([], []) | | Update | componentDidUpdate | useEffect([deps]) | | Unmount | componentWillUnmount | useEffect return |

생명주기에서 중요한 개념

• 렌더링과 생명주기 차이
  • 렌더링은 UI 계산 과정
  • 생명주기는 컴포넌트의 상태 변화 흐름 ⇒ 렌더링이 먼저, 그 다음 effect 실행
• useEffect 실행 순서
  1. 렌더링
  2. 화면에 반영
  3. useEffect 실행 ⇒ 그래서 DOM 접근은 useEffect에서
• cleanup이 중요한 이유
  • 이벤트 제거 안 하면 메모리 누수
  • 타이머 제거 필요
  • API 요청 취소 필요

면접에서 자주 나오는 질문

• useEffect와 useLayoutEffect 차이?

  useEffect는 화면 렌더링 후 실행, useLayoutEffect는 렌더링 전에 동기적으로 실행된다.

• 의존성 배열이 왜 필요한가?

  의존성 배열은 불필요한 재실행을 막고, 특정 값 변화에만 반응하도록 제어하기 위해 필요하다.

• 무한 렌더링 발생 원인은?

  effect 안에서 상태를 변경하고 그 상태를 의존성에 넣으면 무한 렌더링이 발생할 수 있다.

• cleanup은 언제 실행되는가?

  cleanup은 이전 effect를 정리하기 위해 실행되며, 언마운트 시 또는 재실행 직전에 호출된다.

참고자료

• https://ko.react.dev/learn/lifecycle-of-reactive-effects
• https://velog.io/@dea8307/React-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4Life-Cycle-%EC%9D%B4%ED%95%B4
• https://valueengine.tistory.com/72
• https://goodbegunishalfdone.tistory.com/entry/React-React-LifeCycle
• https://hi-claire.tistory.com/55
• https://react.vlpt.us/basic/25-lifecycle.html