리액트 컴포넌트 라이프사이클

React의 각 구성 요소는 초기화부터 렌더링 및 제거까지 다양한 단계로 구성된 수명 주기를 따른다.
React는 개발자가 이러한 단계에 연결하고 구성 요소 수명 주기의 특정 지점에서 코드를 실행할 수 있도록 하는 일련의 수명 주기 이벤트를 제공한다.

React 컴포넌트 라이프사이클 이벤트

구성 요소가 수명 주기 동안 거치는 다양한 단계를 나타낸다.
mounting, updating, unmounting의 세 가지 주요 단계로 나눌 수 있다.

• mounting 단계:
  구성 요소가 처음 생성되어 DOM에 삽입될 때 발생한다. 이 단계에서 React는 미리 정의된 순서에 따라 특정 수명 주기 메서드를 호출한다.
• updating 단계:
  props나 state의 변경으로 인해 구성 요소가 다시 렌더링될 때 발생한다. React는 업데이트를 효율적으로 처리하고 다시 렌더링하기 위해 수명 주기 메서드를 호출한다.
• unmounting 단계:
  구성 요소가 DOM에서 제거될 때 발생한다. React는 구성 요소가 삭제되기 전에 정리 작업을 수행하기 위해 단일 수명 주기 메서드를 호출한다.

mounting event

mounting 단계는 구성 요소가 인스턴스화되어 DOM에 삽입될 때 시작된다.

constructor():
이는 마운팅 단계에서 호출되는 첫 번째 메서드이다.
구성 요소의 상태를 초기화하고 이벤트 핸들러를 바인딩한다.
getDerivedStateFromProps():
새 props가 수신될 때 렌더링 직전에 호출된다.
상태를 업데이트하는 객체를 반환하거나 변경 사항이 없음을 나타내는 null을 반환한다.
render():
이 메서드는 현재 state와 props를 기반으로 구성 요소의 UI를 렌더링하는 역할을 한다.
componentDidMount():
구성 요소가 DOM에 렌더링된 후 호출된다.
일반적으로 API에서 데이터를 가져오거나 이벤트 리스너를 설정하는 등의 역할을 수행하는 데 사용된다.

updating event

업데이트 단계는 구성 요소의 props나 status가 변경되어 다시 렌더링이 트리거될 때 발생한다.

getDerivedStateFromProps(newProps):
새 props가 수신될 때 렌더링 전에 호출된다.
상태를 업데이트하는 객체를 반환하거나 변경 사항이 없음을 나타내는 null을 반환한다.
shouldComponentUpdate():
새로운 props나 state가 수신될 때 렌더링 전에 호출된다.
boolean 값을 반환하여 구성 요소를 다시 렌더링해야 하는지 여부를 결정한다.
shouldComponentUpdate()를 활용하여 불필요한 재렌더링을 방지하여 성능을 최적화한다.
render():
업데이트된 상태 및 소품을 기반으로 구성요소의 UI를 다시 렌더링한다.
getSnapshotBeforeUpdate():
DOM이 업데이트되기 직전에 호출된다.
이를 통해 구성 요소는 변경 사항이 적용되기 전에 DOM에서 정보를 캡처할 수 있다.
componentDidUpdate():
구성 요소가 다시 렌더링된 후 호출된다.
일반적으로 DOM 업데이트 또는 추가 데이터 가져오기와 같은 역할을 수행하는 데 사용된다.

unmounting event

unmounting 단계는 DOM에서 구성 요소가 제거될 때 발생한다.

componentWillUnmount():
구성 요소가 DOM에서 제거되기 직전에 호출된다. 일반적으로 이벤트 리스너 취소 또는 타이머 지우기와 같은 정리 작업을 수행하는 데 사용된다.

오류 처리를 위한 수명 주기 이벤트

componentDidCatch(error, errorInfo):
렌더링 중에 하위 구성 요소에 의해 오류가 발생한 후 호출된다.
이를 통해 구성요소는 오류 정보를 기록하거나 대체 UI를 표시할 수 있다.

정리

mounting	컴포넌트 props update	컴포넌트 state update	forceUpdate()를 사용한 update	unmounting
constructor()
getDerivedStateFromProps()
	getDerivedStateFromProps()
	shouldComponentUpdate()	shouldComponentUpdate()
	componentWillUpdate()	componentWillUpdate()	getSnapshotBeforeUpdate()
render()	render()	render()	render()
	componentDidUpdate()	componentDidUpdate()	componentDidUpdate()
componentDidMount()
				componentWillUnmount()