[React] 리액트 생명주기

 

들어가며

리액트는 UI (사용자 인터페이스)를 구축하기 위한 인기 있는 라이브러리 중 하나로, 컴포넌트 기반 설계가 핵심입니다. 리액트 컴포넌트는 생명주기라는 개념을 통해 생성, 업데이트, 제거 과정을 관리하며, 이는 애플리케이션의 동작 방식에 큰 영향을 미칩니다. 오늘은 리액트 생명주기의 각 단계를 살펴보고, 클래스형 컴포넌트와 함수형 컴포넌트에서 생명주기를 어떻게 다룰 수 있는지 알아보겠습니다.

 

요약

• 리액트는 UI를 구성할 때 컴포넌트를 기반으로 동작하며, 각 컴포넌트는 마운트(Mount) > 업데이트(Update) > 언마운트(Unmount)의 과정을 거침
• 해당 과정을 생명주기(Lifecycle)라고 부르며, 적절한 타이밍에 API 호출, 이벤트 등록/해제, 메모리 관리 등을 수행할 수 있음
• 함수형 컴포넌트(React Hooks)가 클래스형 컴포넌트에 비해 주류가 되었지만, 레거시 코드나 유지보수 상황을 고려해서 두 가지 방식을 이해하는 것이 중요함

 

---

생명주기의 큰 흐름

리액트 생명주기는 컴포넌트의 상태 변화에 따라 다음 세 가지 단계로 나뉩니다:

1. 마운트(Mount) : 컴포넌트가 DOM에 삽입될 때
2. 업데이트(Update) : props 또는 state가 변경되어 컴포넌트가 다시 렌더링될 때
3. 언마운트(Unmount) : 컴포넌트가 DOM에서 제거될 때

 

마운트(Mount)

• 개념 : 컴포넌트가 DOM에 처음으로 삽입되는 단계. 컴포넌트가 생성되고 DOM에 추가될 때 호출되는 메서드
• 대표 작업 : 초기화, API 호출, 이벤트 구독 설정 등

클래스형 메서드

`constructor()` : state 초기화, 메서드 바인딩

`render()` : JSX 반환(화면에 그려질 내용 정의)

`componentDidMount()` : DOM에 마운트된 직후 한 번만 호출

함수형 대체(Hooks)

`useEffect(() => {...}, [])` : 의존성 배열을 빈 배열로 두어 최초 마운트 후에만 한 번 실행

 

업데이트(Update)

• 개념 : props 또는 state가 변경되어 컴포넌트가 다시 렌더링되는 단계
• 대표 작업 : 변경된 값 반영, DOM 갱신 후 작업, 성능 최적화 등

클래스형 메서드

`shouldComponentUpdate(nextProps, nextState)` : 렌더링 필요 여부 결정(성능 최적화)

`render()` : 새로운 상태나 props를 반영해 JSX 재생성

`componentDidUpdate(prevProps, prevState)` : DOM 업데이트가 완료된 직후 후속 작업

함수형 대체(Hooks)

`useEffect(() => {...}, [deps])` : 특정 의존성이 변할 때마다 실행

 

언마운트(Unmount)

• 개념 : 컴포넌트가 더 이상 필요 없어져 DOM에서 제거되는 단계
• 대표 작업 : 구독 해제, 타이머/리스너 정리, 메모리 누수 방지 등

클래스형 메서드

`componentWillUnmount()` : 컴포넌트가 DOM에서 제거되기 직전에 호출

함수형 대체(Hooks)

`useEffect(() => { ...; return () => { /* clean-up */ }}, [])` : return의 clean-up 함수가 언마운트될 때 호출

 

함수형 컴포넌트(Hooks)에서의 생명주기

useEffect

• 클래스형의 `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` 로직을 통합해 관리
• 의존성 배열에 값이 있으면 해당 값이 변할 때마다 호출, 빈 배열이면 최초 한 번만
• 여러 개를 중복 작성해도 문제 없어서 로직을 분할하기 쉬움

import { useEffect } from "react";

function MyComponent({ propValue }) {
  useEffect(() => {
    // 마운트 또는 propValue 변경 시 호출
    console.log("컴포넌트가 마운트되거나 propValue가 변경됨");

    return () => {
      // 언마운트 시 호출
      console.log("컴포넌트가 언마운트됨");
    };
  }, [propValue]); // 의존성 배열
}

useLayoutEffect

• 브라우저가 실제 화면을 그리기 직전에 동기적으로 실행
• 화면 깜박임(Flash) 등의 문제를 최소화할 때 사용
• 성능 이슈를 야기할 수 있으므로 일반적으로는 `useEffect` 권장

기타 Hooks (useCallback, useMemo 등)

• 컴포넌트 재렌더링 시 불필요한 연산을 줄이거나, 동일한 함수를 재사용하기 위해 사용
• "성능 최적화 전략"으로 자주 언급됨 

 

---

최신 트렌드와 권장 사항

• 함수형 컴포넌트 + Hooks: 새로운 프로젝트는 주로 이 방식을 채택
• React Strict Mode: 개발 모드에서 일부 생명주기 이중 호출로 잠재 버그를 조기 발견
• 성능 최적화: `useCallback`, `useMemo`, `React.memo` 등을 사용해 불필요한 렌더링을 최소화
• Server Components & SSR: Next.js 같은 프레임워크 환경에 맞춰, 생명주기 개념이 일부 달라질 수 있음
• Deprecated 메서드 지양: 더 이상 사용하지 말고 권장되는 대안으로 전환