React 컴포넌트의 생명주기 메서드는 컴포넌트의 생성부터 소멸까지 여러 단계에서 호출되는 일련의 메서드다
이 메서드들을 이해하고 적절히 사용하는 것은 React 애플리케이션의 성능 최적화와 자원 관리에 매우 중요하다
React 16.3 이후에는 생명주기 메서드가 크게
마운팅(Mounting), 업데이트(Updating), 언마운팅(Unmounting)의 세 단계로 구분되며,
각 단계별로 호출되는 메서드들이 있다
추가적으로, 오류 경계(Error Boundary) 단계의 메서드도 있다
마운팅 (Mounting)
마운팅은 컴포넌트가 DOM에 처음 삽입되는 단계다
다음 메서드들이 이 순서대로 호출된다
- constructor()
- 컴포넌트의 생성자 함수
- 초기 state를 설정
- static getDerivedStateFromProps(props, state)
- props로부터 파생된 state를 객체 형태로 반환환다
- 반환된 객체는 state에 병합된다
- render()
- 컴포넌트의 UI를 렌더링하는 메서드입
- render() 메서드는 순수 함수여야 하며, 이 메서드 내에서 this.setState를 호출하면 안 된다
- componentDidMount()
- 컴포넌트가 마운트된 직후에 호출된다
- DOM 노드에 접근하거나, 외부 데이터를 요청하는 네트워크 요청을 배치하는 데 사용된다
업데이트 (Updating)
컴포넌트의 props나 state가 변경될 때 업데이트 과정이 시작된다
다음 메서드들이 호출됩니다:
- static getDerivedStateFromProps(props, state)
- 컴포넌트가 새로운 props를 받을 때 호출된다
- shouldComponentUpdate(nextProps, nextState)
- 컴포넌트가 리렌더링을 해야 할지 결정한다
- 기본적으로 true를 반환한다
- render()
- 컴포넌트를 리렌더링한다
- getSnapshotBeforeUpdate(prevProps, prevState)
- 실제 DOM 변경이 일어나기 직전에 호출된다
- 반환된 값은 componentDidUpdate()에 인자로 전달된다
- componentDidUpdate(prevProps, prevState, snapshot)
- 업데이트가 끝난 후에 호출된다
- DOM 작업이나 네트워크 요청 같은 작업을 수행할 수 있다
언마운팅 (Unmounting)
컴포넌트가 DOM에서 제거될 때 언마운팅 과정이 시작된다:
- componentWillUnmount()
- 컴포넌트가 언마운트되기 직전에 호출된다
- 타이머를 제거하거나, 네트워크 요청을 취소하고, 컴포넌트에 의해 생성된 모든 자원을 정리(clean-up)하는 데 사용된다
오류 경계 (Error Boundary)
하위 컴포넌트 트리에서 JavaScript 오류를 포착하고, 이를 로깅하거나 네트워크에 보고하고, 오류 UI를 렌더링하는 컴포넌트
- static getDerivedStateFromError(error)
- 하위 컴포넌트에서 오류가 발생했을 때 호출된다
- 이 메서드를 통해 fallback UI를 렌더링할 수 있다
- componentDidCatch(error, info)
- 오류가 발생한 후에 호출된다
- 이 메서드에서는 오류 정보를 로깅할 수 있다
React의 생명주기 메서드들을 적절히 사용함으로써,
컴포넌트의 상태를 효과적으로 관리하고, 성능을 최적화하며, 사용자에게 더 나은 경험을 제공할 수 있다
'Frontend' 카테고리의 다른 글
useState 사용하는 이유 (0) | 2024.03.05 |
---|---|
리액트에서 JSX 문법 어떻게 사용되는가 (0) | 2024.03.05 |
이벤트 버블링과 캡쳐링, 이벤트 위임 (0) | 2024.03.05 |
shouldComponentUpdate (0) | 2024.03.05 |
pure component (0) | 2024.03.05 |