리액트를 이용해 동적인 웹 애플리케이션을 개발하다 보면, 단순히 사용자의 클릭에 반응하는 것 이상의 기능이 필요할 때가 있습니다. 예를 들어, 페이지가 로드되자마자 서버에서 데이터를 가져오거나, 컴포넌트가 사라질 때 특정 메모리를 정리해야 하는 경우가 바로 그렇습니다.
이러한 작업을 적절한 시점에 수행하기 위해 꼭 이해해야 하는 개념이 바로 생명주기(Lifecycle) 메서드입니다. 이번 포스팅에서는 클래스 기반 리액트 컴포넌트의 생명주기와 각 단계별 핵심 메서드를 정리해 보겠습니다.
1. 생명주기(Lifecycle)란 무엇인가요?
리액트의 모든 컴포넌트는 **생성(Mounting) → 갱신(Updating) → 제거(Unmounting)**라는 세 가지 주요 단계를 거칩니다. 생명주기 메서드는 이 과정 중 특정 시점에 리액트 엔진에 의해 자동으로 호출되는 특별한 메서드들을 말합니다. 이를 통해 개발자는 컴포넌트의 동작을 세밀하게 제어할 수 있습니다.
2. 컴포넌트의 탄생: 마운팅(Mounting)
컴포넌트 인스턴스가 생성되어 실제 DOM에 삽입되는 과정을 마운팅이라고 합니다.
-
constructor: 컴포넌트의 생성자 함수로, 가장 먼저 실행됩니다. 주로 초기 상태(state)를 설정하거나 메서드를 바인딩하는 데 사용됩니다.
-
render: 컴포넌트의 UI를 정의하는 필수 메서드입니다. 속성(props)과 상태(state)를 바탕으로 가상 DOM을 생성합니다.
-
componentDidMount: 컴포넌트가 DOM에 성공적으로 삽입된 직후에 호출됩니다. 이 시점에는 실제 DOM 요소에 접근할 수 있어, API 호출(네트워크 요청)이나 외부 라이브러리 연동 작업을 수행하기에 가장 적합한 장소입니다.
3. 컴포넌트의 변화: 갱신(Updating)
컴포넌트의 속성(props)이 변경되거나 상태(state)가 업데이트될 때 발생하며, 리액트는 효율적인 렌더링을 위해 다음 메서드들을 제공합니다.
-
shouldComponentUpdate: 컴포넌트를 다시 렌더링할지 여부를 결정하는 중요한 메서드입니다. 기본적으로는 항상 true를 반환하지만, 특정 조건에서 false를 반환하게 하여 불필요한 렌더링을 방지함으로써 성능 최적화를 꾀할 수 있습니다.
-
componentDidUpdate: 갱신 작업이 완료되고 DOM 변화가 실제 화면에 반영된 후 호출됩니다. 이전의 props나 state와 현재 데이터를 비교하여 특정 작업을 수행할 때 유용합니다.
4. 컴포넌트의 소멸: 언마운팅(Unmounting)
컴포넌트가 더 이상 필요하지 않아 DOM에서 제거되는 과정을 언마운팅이라고 합니다.
-
componentWillUnmount: 컴포넌트가 파괴되기 직전에 호출됩니다. 마운팅 시점에 등록했던 타이머를 제거하거나, 네트워크 요청 취소, 외부 라이브러리 인스턴스 정리 등 정리(Cleanup) 작업을 수행하는 곳입니다.
5. 예외 상황 대응: 에러 처리(Error Handling)
리액트 컴포넌트 내에서 에러가 발생했을 때 앱 전체가 멈추는 것을 방지하기 위해 에러 경계(Error Boundaries) 개념이 도입되었습니다.
-
componentDidCatch: 자식 컴포넌트의 렌더링 과정이나 생명주기 메서드 내에서 에러가 발생했을 때 호출됩니다. 이를 통해 에러 메시지를 기록하거나, 사용자에게 복구 가능한 UI(Fallback UI)를 보여줄 수 있습니다.
리액트의 생명주기 메서드는 컴포넌트가 언제 화면에 나타나고, 어떻게 변화하며, 언제 사라지는지를 통제할 수 있는 강력한 도구입니다. 비록 최근에는 함수형 컴포넌트와 Hook(useEffect 등)을 더 많이 사용하지만, 리액트의 근간이 되는 이 생명주기 원리를 이해하는 것이 좋습니다.