[리액트를 다루는 기술] 컴포넌트의 라이프사이클 메서드

모든 리액트 컴포넌트는 라이프사이클(생명주기)이 존재하고,

이 수명은 페이지에 렌더링되기 전의 준비 과정에 시작해 페이지에서 사라질 때 끝난다.

참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다.

함수형 컴포넌트에서는 Hooks 기능을 사용해 비슷한 작업을 처리할 수 있다.

 

라이프사이클 메서드는 총 9 가지이다.

Will 접두사가 붙은 메서드는 작업을 작동하기 전에 실행되는 메서드, 

Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드

 

라이프사이클은 총 3 가지, 마운트, 업데이트, 언마운트 카테고리로 나뉜다.

 

마운트

DOM이 생성되고  페이지에 컴포넌트가 나타나는 것을 말한다.

 

<마운트할 때 호출하는 메서드>

 

컴포넌트 만들기

→ constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드

→ getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드

→ render : 준비한 UI를 렌더링하는 메서드

→ componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

 

업데이트

컴포넌트 정보를 업데이트하는 것을 말한다.

 

<업데이트할 때 호출하는 메서드>

 

업데이트를 발생시키는 요인(props 변경, state 변경, 부모 컴포넌트 리렌더링)

→ getDerivedStateFromProps

→ souldComponentUpdate(true 반환 시 render 호출, false 반환 시 여기서 작업 취소)

→ render ( ← this.forceUpdate로 강제로 렌더링을 트리거할 때)

→ getSnapshotBeforeUpdate(웹 브라우저 상의 실제 DOM 변화)

→ componentDidUpdate

언마운트

컴포넌트를 DOM에서 제거하는 것, 즉 페이지에서 컴포넌트가 사라지는 것을 말한다.