[React Native] 라이프 사이클 호출순서

React 클래스 컴포넌트는 함수형 컴포넌트와 다르게 라이프 사이클 함수들을 가지고 있으며,

이 라이프 사이클 함수를 통하여 컴포넌트를 효율적으로 활용할 수 있다.

 

호출순서

컴포넌트 생성 시

constructor

getDerivedStateFromProps

render

componentDidMount

 

컴포넌트의 Props 변경 시

getDerivedStateFromProps

shouldComponentUpdate

render

getSnapshotBeforeUpdate

componentDidUpdate

 

컴포넌트의 State 변경 시

shouldComponentUpdate

render

getSnapshotBeforeUpdate

componentDidUpdate

 

컴포넌트 렌더 중 에러 발생 시

componentDidCatch

 

컴포넌트 제거 시

componentWillUnmount

 

constructor 함수

클래스 컴포넌트는 클래스이기 때문에 생성자 함수가 존재하며, 클래스 컴포넌트에서는 State를 사용하지 않아 State의 초기 값 설정이 필요하지 않다면 생성자 함수를 생략할 수 있다.

생성자 함수를 사용할 때는 반드시 super(props) 함수를 호출하여 부모 클래스의 생성자 호출한다.

 

render 함수

클래스 컴포넌트가 렌더링 되는 부분을 작성. render 함수는 부모로부터 부모는 Props 값이 변경되거나 this.setState로 State의 값이 변경되면 화면을 갱신할때 호출된다.

 

getDerivedStateFromProps 함수

부모로 받은 Props와 State를 동기화 할 때 사용.

이 함수는 컴포넌트가 생성될 때 한번만 호출되며, Props가 변경될 때마다 호출된다.

 

componentDidMount 함수

클래스 컴포넌트가 처음으로 화면에 표시된 후 이 함수가 호출됨

즉 render함수가 처음 호출된 후 호출되는 방식

Props, this.setState로 State 값이 변경되어도 다시 호출되지 않음

 

shouldComponentUpdate 함수

Props 또는 State의 값이 변경되었을 시 다시 화면을 그리고 싶지 않은 경우 이 함수를 사용하여 렌더링을 제어

이 함수가에 false를 반환하면 화면을 다시 그리는 리렌더링을 막을 수

있다.

 

getSnapshotBeforeUpdate 함수

Props 또는 State가 변경되어 화면을 다시 그리기 위해 render함수가 호출된 후 실제로 화면이 갱신되기 직전에 이 함수가 호출된다.

 

componentDidUpdate 함수

컴포넌트가 처음 화면에 표시된 후 실행되고 두번 다시 호출되지 않는 함수

 

componentWillUnmour 함수

컴포넌트가 화면에서 사라진 후 호출되는 함수

 

componentDidCatch 함수

컴포넌트의 렌더링 도중 에러가 발생하면 동작되는 함수

렌더링 오류 시 예외처리를 할 수 있다.