React | 렌더링 주기

---

React에서 컴포넌트가 렌더링 되는 케이스는 다양하다.

• 초기 렌더링 : 컴포넌트가 초기 생성되고 DOM에 마운트 될 때
• props가 변경될 때
• state가 변경될 때
• 부모 컴포넌트가 렌더링 될 때
• 컴포넌트 update 관련 생명주기 메서드가 실행되었을 때 : shouldComponentUpdate, componentDidUpdate 등등..

React 렌더링 주기는 컴포넌트가 언제 렌더링 되고, 업데이트 되는지에 대해 설명한다.

(생명주기 메서드는 컴포넌트의 생성, 업데이트, 소멸에 관한 메서드에 대한 내용이므로 개념이 다름!)

---

1. 생성 단계 (Mounting) 

• counstructor()
• state getDerivedStateFromProps()
• render()
• componentDidMount()

React | 렌더링 주기 - 생성 단계 (Mounting)

---

2. 업데이트 단계 (Updating)

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

React | 렌더링 주기 - 업데이트 단계 (Updating)

---

3. 제거 단계 (Unmounting)

• componentWillUnmount()

React | 렌더링 주기 - 제거 단계 (Unmounting)

---

4. 에러 처리 단계 (Error Handling)

• static getDerivedStateFromError()
• componentDidCatch()

React | 렌더링 주기 - 에러 처리 단계 (Error Handling)