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

리액트 컴포넌트에는 라이프사이클(Lifecycle)이 있다.

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

라이프 사이클은 마운트, 업데이트, 언마운트 세 가지로 나눈다.

 

마운트(Mounting)

DOM이 생성되고 웹 브라우저상에 나타나는 것

 

업데이트(Updating)

1. props가 바뀔 때

2. state가 바뀔 때

3. 부모 컴포넌트가 리렌더링될 때

4. this.forceUpdate로 강제로 렌더링을 트리거할 때

이 네가지 경우에 컴포넌트를 업데이트한다.

 

언마운트(Unmounting)

컴포넌트를 DOM에서 제거하는 것

 

 

라이프사이클 메서드

마운트

- constructor: 컴포넌트 생성자 메서드, 초기 state 정할 수 있음

- getDerivedStateFromProps: props로 받아 온 값을 state에 동기화시킴

- render: 라이프사이클의 유일한 필수 메서드, 마운트할 때에는 UI를 렌더링함

- componentDidMount: 컴포넌트를 만들고 첫 렌더링을 다 마친 후 실행함

 

업데이트

- getDerivedStateFromProps: 업데이트가 시작하기 전에도 호출됨. props의 변화에 따라 state값 변화주고 싶을 때 사용

- shouldComponentUpdate: props나 state를 변경했을 때 리렌더링을 할지 여부를 결정하는 메서드, true 값을 반환하면 render 호출하고 false 값을 반환하면 작업을 취소함

- render: 컴포넌트를 리렌더링함

- getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 직전에 호출함

- componentDidUpdate: 업데이트 작업이 끝난 후 호출함

 

언마운트

- componentWillUnmount: 컴포넌트를 DOM에서 제거할 때 실행

 

+)

- componentDidCatch: 렌더링 도중 에러가 발생했을 때 오류 UI를 보여줄 수 있게 함

 

---

클래스형 컴포넌트에서는 라이프사이클 메서드를 사용하고, 함수형 컴포넌트에서는 사용할 수 없다.

함수형 컴포넌트에서는 그 대신 Hooks를 사용한다.

Hook은 클래스안에서는 동작하지 않고, 클래스 없이 React를 사용할 수 있게 한다.