7장 컴포넌트의 라이프사이클 메서드

라이플 사이크 메서드는 클래스형 컴포넌트에서만 사용할 수 있음. 함수형 컴포넌트에서는 사용할 수 없음. 대신 Hooks 기능을 사용하여 비슷한 작업을 처리.

7.1 라이프사이클 메서드의 이해

Will 접두사가 붙은 메서드  : 작업을 처리하기 전에 실행되는 메서드
Did 접두사가 붙은 메서드 : 작업을 작동한 후에 실행되는 메서드

종류 : 마운트, 업데이트, 언마운트

마운트

• 호출 : DOM이 생성되고 웹 브라우저상에 나타날 때
• 순서 :
  1. constructor :  컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
  2. getDerivedStateFromProps  : props에 있는 값을 state에 넣을 때 사용하는 메서드
  3. render : 준비한 UI를 렌더링하는 메서드
  4. componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

업데이트

• 호출
  1. props가 바뀔 때
  2. state가 바뀔 때
  3. 부모 컴포넌트가 리렌더링될 때
  4. this.forceUpdate로 강제로 렌더링을 트리거할 때
• 순서
  1. getDerivedStateFromProps
  2. shouldComponentUpdate : 컴포넌트가 리랜더링을 할지를 결정하는 메서드 (true -> render호출, false -> 여기서 작업 취소)
  3. render
  4. getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출
  5. componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

언마운트 

• 호출
  • 컴포넌트를 DOM에서 제거할 때
• 순서
  • componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출

7.2 라이프사이클 메서드 살펴보기

7.3 라이프사클 메서드 사용하기