✅ 라이프사이클

리액트 모든 컴포넌트에는 라이프사이클(수명주기)가 존재하며, 페이지에 렌더링되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝난다.

💛 라이프사이클 메서드를 사용하는 때

• 컴포넌트 첫 렌더링 시 특정 작업을 처리해야 할 때
• 컴포넌트 업데이트 전후로 어떤 작업을 처리해야 할 때
• 불필요한 업데이트를 방지해야 할 때 등

▶️ 컴포넌트 상태에 변화가 있을 때마다 실행 ❗️

✅ 라이프사이클 메서드

카테고리는 3가지!

• 마운트: DOM이 생성되고 웹페이지에 컴포넌트 나타남
• 업데이트: 컴포넌트 정보를 업데이트
  - 업데이트 되는 때
  • props, state가 바뀔 때
  • 부모 컴포넌트가 리렌더링 될 때
  • this.forceUpdate로 강제로 렌더링 시킬 때
• 언마운트: DOM에서 컴포넌트를 제거하는 것(페이지에서 컴포넌트가 사라짐)

카테고리에 따른 메서드 호출 순서

🌕 마운트

1. 컴포넌트 만들기
2. constructor: 클래스 생성자 메서드
3. getDerivedStateFromProps: props 값을 state에 넣을 때 사용하는 메서드
4. render: UI 렌더링 메서드
5. componentDidMount: 컴포넌트가 웹브라우저에 나타난 이후 호출하는 메서드

🌗 업데이트

1. 업데이트되는 요인 발생
2. getDerivedStateFromProps: props 변화에 따라 state 변화를 주고 싶을 때
3. shouldComponentUpdate
   • false 일 경우 작업 중지
   • true 일 경우 render 호출
   • 특정 함수에서 this.forceUpdate() 호출 시 render 호출
4. render: UI 리렌더링
5. getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 전에 호출하는 메서드
6. componentDidUpdate: 업데이트 후 호출하는 메서드

🌑 언마운트

1. 언마운트 하기
2. componentWillUnmount: 웹페이지에 있는 컴포넌트가 사라지기 전 호출하는 메서드

라이프사이클 메서드 흐름