React | 클래스형 컴포넌트 생명주기

클래스형 컴포넌트 생명주기

• 생성 (Mounting)
• 업데이트 (Update)
• 제거 (Unmounting)

각 단계에서는 특정 메서드를 사용할 수 있어 컴포넌트의 상태나 데이터를 제어하고, 특정 작업을 수행할 수 있음

 

---

마운팅(Mounting) 단계

마운팅 단계는 컴포넌트가 처음 DOM에 삽입될 때 발생함

 

constructor

컴포넌트를 초기화 할 때 호출

초기 state를 설정하거나 클래스형 컴포넌트에서는 this 바인딩을 설정할 수 있음

 

static getDerivedStateFromProps(props, state)

컴포넌트가 생성될 때 props로부터 state를 업데이트하고자 할 때 사용

return된 객체가 새로운 state가 됨

주로 props에 따라 state가 동기화되도록 설정할 때 유용

 

render

컴포넌트를 실제로 DOM에 렌더링하는 메서드

반드시 순수한 함수여야 하며, state나 props에 따라 UI를 반환함

 

componentDidMount

컴포넌트가 처음 렌더링되고 DOM에 추가된 직 후에 한번 실행됨

이 시점에 보통 네트워크 요청, 타이머 설정, 외부 라이브러리 호출 등 초기 데이터 로드나 DOM 조작이 필요할 때 사용됨

 

---

업데이트(Update) 단계

컴포넌트의 state또는 props가 변경될 때 발생

 

static getDerivedStateFromProps(props, state)

업데이트 시에도 마운트와 마찬가지로 props에 따라 state를 업데이트할 때 호출 됨

 

shouldComponentUpdate(nextProps, nextState)

컴포넌트가 업데이트될지 여부를 결정하는 메서드

이 메서드는 성능 최적화에 사용되며, true를 반환하면 업데이트가 이루어지고 false를 반환하면 업데이트를 방지함

 

render

컴포넌트가 다시 렌더링 됨

새로운 state나 props에 따라 UI가 갱신됨

 

getSnapshotBeforeUpdate(prevProps, prevState)

컴포넌트가 실제 DOM에 반영되기 직전에 호출됨

DOM에서 특정 정보를 캡쳐할 필요가 있을 때 유용

이 메서드는 반환값을 componentDidupdate에서 세 번째 매개변수로 사용할 수 있음

 

componentDidUpdate(prevProps, prevState, snapshot)

컴포넌트가 업데이트되고 상태나 속성이 변경된 후에 실행됨

이 시점에는 이전 props나 state에 접근할 수 있어 특정 조건에 따라 네트워크 요청이나 추가 처리를 수행할 수 있음

이 메서드는 무한 루프에 빠지지 않도록 주의가 필요함

 

---

언마운팅(Unmounting) 단계

컴포넌트가 DOM에서 제거될 때 발생

 

componentWillUnmount

컴포넌트가 DOM에서 제거되기 직전에 호출

타이머, 네트워크 요청을 정리하거나 메모리 누수를 방지하기 위해 사용됨

 

---

정리

단계	메서드	설명
마운팅	constructor	초기 state 설정 및 this 바인딩 설정
	getDerivedStateFromProps	props로부터 state를 업데이트할 때 사용
	render	UI를 반환하는 함수, 순수 함수여야 함
	componentDidMount	DOM이 완전히 생성된 후 실행, 초기 데이터 로드 및 네트워크 요청에 사용
업데이트	getDerivedStateFromProps	업데이트 시에도 호출됨
	shouldComponentUpdate	컴포넌트 업데이트 여부를 결정
	render	state나 props에 따라 UI가 다시 렌더링
	getSnapshotBeforeUpdate	DOM 업데이트 직전의 정보를 캡쳐할 때 사용
	componentDidUpdate	업데이트가 완료된 후 실행, 이전 상태를 기반으로 후속 작업 수행 가능
언마운팅	componentWillUnmount	컴포넌트가 제거될 때, 타이머 제거 및 정리 작업 수행