[react.js] 컴포넌트 수명주기 간략 정리

컴포넌트 수명주기란?

리액트(React) 컴포넌트의 수명주기(Lifecycle)는 컴포넌트가 생성될 때부터 소멸될 때까지의 여러 단계를 말합니다. 컴포넌트 수명주기를 이해하면 컴포넌트가 언제 어떤 작업을 수행하는지 이해할 수 있습니다. 리액트 클래스 컴포넌트의 수명주기 메서드들은 다음과 같습니다:

 

라이프사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있습니다.
함수형 컴포넌트에서는 Hooks 기능을 사용해서 비슷한 기능을 처리합니다.

 

1. Mounting(생성 단계)
   • constructor(): 컴포넌트가 생성될 때 호출되는 생성자 메서드로, 초기 상태 설정 및 바인딩 작업에 주로 사용됩니다.
   • static getDerivedStateFromProps(): props를 기반으로 상태를 동기화할 때 사용합니다. (리액트 v16.3 이후에서 사용 가능)
   • render(): 컴포넌트의 UI를 렌더링하는 메서드입니다. 필수로 구현해야 합니다.
   • componentDidMount(): 컴포넌트가 렌더링된 후에 호출되는 메서드로, 외부 데이터를 가져오거나 초기화 작업을 수행할 때 사용합니다.
2. Updating(업데이트 단계)
   • static getDerivedStateFromProps(): 업데이트 사항에 따라 props로부터 상태를 동기화할 때 사용합니다. (리액트 v16.3 이후에서 사용 가능)
   • shouldComponentUpdate(): 컴포넌트의 리렌더링을 결정하는 메서드로, 성능 최적화에 활용됩니다.
   • render(): 컴포넌트의 UI를 업데이트된 내용으로 다시 렌더링합니다.
   • getSnapshotBeforeUpdate(): 실제 DOM 업데이트 직전에 호출되는 메서드로, 업데이트 전에 DOM 상태를 기반으로 작업을 수행할 때 사용합니다.
   • componentDidUpdate(): 컴포넌트가 업데이트를 완료한 후에 호출되는 메서드로, 외부 데이터를 가져오거나 업데이트 이후 작업을 수행할 때 사용합니다.
3. Unmounting(소멸 단계)
   • componentWillUnmount(): 컴포넌트가 제거되기 직전에 호출되는 메서드로, 이벤트 리스너 해제 또는 리소스 정리 등을 수행할 때 사용합니다.
4. Error Handling(오류 처리 단계)
   • static getDerivedStateFromError(): 자식 컴포넌트에서 발생한 오류를 처리할 때 사용합니다. (리액트 v16 이후에서 사용 가능)
   • componentDidCatch(): 자식 컴포넌트에서 발생한 오류를 처리하는 메서드입니다.

 

컴포넌트의 수명주기 메서드들은 컴포넌트가 렌더링되거나 업데이트되거나 소멸될 때마다 순서대로 호출됩니다.

이를 활용하여 컴포넌트의 상태를 변경하거나 외부 데이터를 가져오는 등의 작업을 관리할 수 있습니다.

리액트 함수형 컴포넌트에서는 훅(Hook)을 사용하여 수명주기와 유사한 작업을 수행할 수 있습니다.