생명 주기 메서드

 

 

 

React 컴포넌트의 생명주기 메서드는 컴포넌트의 생성부터 소멸까지 여러 단계에서 호출되는 일련의 메서드다

이 메서드들을 이해하고 적절히 사용하는 것은 React 애플리케이션의 성능 최적화와 자원 관리에 매우 중요하다

 

React 16.3 이후에는 생명주기 메서드가 크게

마운팅(Mounting), 업데이트(Updating), 언마운팅(Unmounting)의 세 단계로 구분되며,

각 단계별로 호출되는 메서드들이 있다

추가적으로, 오류 경계(Error Boundary) 단계의 메서드도 있다

 

마운팅 (Mounting)

마운팅은 컴포넌트가 DOM에 처음 삽입되는 단계다

다음 메서드들이 이 순서대로 호출된다

1. constructor()
   • 컴포넌트의 생성자 함수
   • 초기 state를 설정
2. static getDerivedStateFromProps(props, state)
   • props로부터 파생된 state를 객체 형태로 반환환다
   • 반환된 객체는 state에 병합된다
3. render()
   • 컴포넌트의 UI를 렌더링하는 메서드입
   • render() 메서드는 순수 함수여야 하며, 이 메서드 내에서 this.setState를 호출하면 안 된다
4. componentDidMount()
   • 컴포넌트가 마운트된 직후에 호출된다
   • DOM 노드에 접근하거나, 외부 데이터를 요청하는 네트워크 요청을 배치하는 데 사용된다

 

업데이트 (Updating)

컴포넌트의 props나 state가 변경될 때 업데이트 과정이 시작된다

다음 메서드들이 호출됩니다:

1. static getDerivedStateFromProps(props, state)
   • 컴포넌트가 새로운 props를 받을 때 호출된다
2. shouldComponentUpdate(nextProps, nextState)
   • 컴포넌트가 리렌더링을 해야 할지 결정한다
   • 기본적으로 true를 반환한다
3. render()
   • 컴포넌트를 리렌더링한다
4. getSnapshotBeforeUpdate(prevProps, prevState)
   • 실제 DOM 변경이 일어나기 직전에 호출된다
   • 반환된 값은 componentDidUpdate()에 인자로 전달된다
5. componentDidUpdate(prevProps, prevState, snapshot)
   • 업데이트가 끝난 후에 호출된다
   • DOM 작업이나 네트워크 요청 같은 작업을 수행할 수 있다

 

언마운팅 (Unmounting)

컴포넌트가 DOM에서 제거될 때 언마운팅 과정이 시작된다:

1. componentWillUnmount()
   • 컴포넌트가 언마운트되기 직전에 호출된다
   • 타이머를 제거하거나, 네트워크 요청을 취소하고, 컴포넌트에 의해 생성된 모든 자원을 정리(clean-up)하는 데 사용된다

 

오류 경계 (Error Boundary)

하위 컴포넌트 트리에서 JavaScript 오류를 포착하고, 이를 로깅하거나 네트워크에 보고하고, 오류 UI를 렌더링하는 컴포넌트

1. static getDerivedStateFromError(error)
   • 하위 컴포넌트에서 오류가 발생했을 때 호출된다
   • 이 메서드를 통해 fallback UI를 렌더링할 수 있다
2. componentDidCatch(error, info)
   • 오류가 발생한 후에 호출된다
   • 이 메서드에서는 오류 정보를 로깅할 수 있다

 

React의 생명주기 메서드들을 적절히 사용함으로써,

컴포넌트의 상태를 효과적으로 관리하고, 성능을 최적화하며, 사용자에게 더 나은 경험을 제공할 수 있다