React Lifecycle

React Native Lifecycle - https://retool.com/blog/the-react-lifecycle-methods-and-hooks-explained/

 

😀 Mouting

: 구성 요소 인스턴스가 생성되어 DOM에 삽입됨.

 

✔ constructor : React Native 컴포넌트의 라이프사이클에서 호출되는 첫 번째 메소드. 초기 상태로 구성 요소를 초기화 하는데 사용됨. 생성자에서는 UI 렌더링이 수행되지 않으며, props를 인수로 받고 이 메소드에서 상태를 설정 가능함.

✔ getDerivedStateFromProps : Mouting, Updating 둘다 렌더링 메서드 직전에 호출됨 (이는 componentWillReceiveProps 메소드를 대체함)

이 메서드 내에서는 상태를 업데이트 할 수 없으며, 상태를 업데이트하려면 반환해야 하며 그렇지 않은 경우에는 null을 반환함

✔ render : React 컴포넌트에서 유일하게 필요한 메소드. 화면에 무엇을 표시할지 알려줌. render() 메소드는 상태를 수정하지 않는다는 것을 의미하는 순수한 함수. 호출될 때마다 동일한 결과를 반환하며 브라우저와 직접 상호 작용 하지 않음

✔  componentDidMount : 구성 요소가 렌더링 부분을 완료하면 호출됨. 데이터를 로드하고 결과로 상태를 업데이트 하며 UI 가 새로 수정됨.

상태가 변경될때마다 render() 메서드가 호출되어 결과적으로 화면에 변경사항이 반영됨.

 

 

😀 Updating

: 상태가 변경될 때마다 구성 요소 업데이트 프로세스가 시작됨.

 

✔ getDerivedStateFromProps : 상태나 화면이 변경이 발생할 떄마다 호출됨

✔ shouldComponentUpdate :  새로운 props나 상태가 응답될 때 렌더링 전에 호출됨. (기본값:true) 이 메서드는 초기 렌더링 시 또는 forceUpdate가 사용될 때 호출되지 않으며, 상태나 화면 변경 시 다시  렌더링을 중지하려면 해당 메서드에서 false 를 반환하면됨

✔ render : 상태, 화면 변경 시 렌더링 메서드가 호출 됨

✔ getSnapshotBeforeUpdate : 가장 최근에 렌더링된 화면이 적용되기 직전에 호출됨. 잠재적으로 변경되기 전에 구성요소가 DOM의 일부정보를 사용할수 있도록함

✔ componentDidUpdate : 컴포넌트의 재렌더링이 완료된 직후에 호출됨. 초기 렌더링에는 호출되지 않는다는 점.

 

 

😀 Unmouting

: DOM 구성 요소 화면에서 제거

 

✔ componentWillUnmount : 컴포넌트가 DOM에서 제거될 때 호출 됨. (타이머 무효화, 네트워크 요청 취소 같은 작업이 가능함)

 

 

😀 Error

: 구성 요소를 렌더링하는 동안 오류가 발생하면 호출됨

 

✔ getDerivedStateFromError : 렌더링 중 오류가 발생할 때 마다 호출됨. 오류를 매개변수로 전달받고 값을 반환하여 상태를 업데이트함

✔ componentDidCatch : 하위 구성 요소에서 오류가 발생하면 호출됨. 두개의 매개변수를 받음 

1. error: 발생한 오류

2. info: 어떤 컴포넌트에서 오류가 발생했는지에 대한 정보를 가지고 있는 객체.

 

 

[참고]

 

https://medium.com/@amanpreet_singh/lifecycle-of-react-native-component-2020-edition-1cec4762859b

Lifecycle of React Native Component [2020 Edition]

https://retool.com/blog/the-react-lifecycle-methods-and-hooks-explained/

The React lifecycle: methods and hooks explained