라이프사이클

1. 라이프사이클 메소드란?

• 컴포넌트는 페이지에 렌더링 되기 전부터 사라질 때 까지의 라이프사이클이 존재한다.
• 초기 렌더링, 업데이트 전/후 작업, 불필요한 업데이트 방지 등의 기능을 할 수 있다.
• 클래스형 컴포넌트에서만 사용할 수 있고 함수형 컴포넌트에서는 사용할 수 없다.
• 함수형 컴포넌트에서는 Hooks를 통해 이러한 기능을 대신한다.
• 라이프사이클은 마운트 , 업데이트 , 언마운트 세가지로 나뉜다.

✅ 1-1. 마운트

• DOM이 생성되고 웹 브라우저 상에 나타난 것을 말한다.
• 호출하는 메소드
  constructor : 컴포넌트를 새로 만들 때 마다 호출
  getDerivedStateFromProps : props 값을 state에 넣을 때 사용
  render : 컴포넌트의 UI 를 렌더링
  componentDidMount : 컴포넌트가 웹 브라우저에 나타난 후 호출

⚠️ 1-2. 업데이트

• props / state 가 바뀔때, 부모 컴포넌트가 리렌더링될 때, 강제로 렌더링을 할때 컴포넌트는 업데이트를 한다.
• 호출하는 메소드
  getDerivedStateFromProps : props 의 변화에 따라 state 또한 변할때 사용
  shouldComponentUpdate : true 또는 false 를 반환하며 리렌더링의 여부를 결정
  render : 컴포넌트를 리렌더링
  getSnapshotBeforeUpdate : 업데이트를 DOM에 반영하기 직전에 호출
  componentDidUpdate : 업데이트가 끝난 후 호출

❌ 1-3. 언마운트

• DOM에서 컴포넌트를 제거하는 것을 언마운트라고 한다.
• 호출하는 메소드
  componentWillUnmount : 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출

2. 라이프사이클 공부

• 준식님 말씀대로 개념 정리보단 프로젝트, 세션 진행하면서 라이프사이클을 이해하도록 하자!