0001 React Native App 개발기 6-1

( 해당들은 2019년 12월 12일 기준으로 작성되었음 )

 

React Native App을 개발하기 위해서 Component Cycle에 대해서 잘 알아두어야 하는데, 이번에는 Component Cycle 및 Component를 구성하는 방식에 대해서 알아보려 한다. 

 

---

Component's lifecycle

 

Component Lifecycle

Component의 생명주기는 4가지로 분류할 수 있다. 

 

1. Mounting

 

  컴포넌트 객체가 생성된 후, DOM으로 주입(삽입)될 때

 

  React Native의 실행되는 함수의 순서는 

 

    - constructor

    - static getDerivedStateFromProps ( React v16.3 부터 제공 )  - componentWillReceiveProps ( React v16.3 이전 ) 

    - render

    - componentDidMount

 

2. Updating

 

  브라우저 상에 React 컴포넌트가 표시되거나, 새로운 갱신(변경)이 발생했을 때

 

  React Native의 실행되는 함수 순서는 

 

    - static getDerivedStateFromProps ( React v16.3 부터 제공 )   - componentWillReceiveProps ( React v16.3 이전 ) 

    - shouldComponentUpdate

    - render 

    - getSnapshotBeforeUpdate ( React v16.3 부터 제공 ) - componentWillUpdate ( React v16.3 이전 )

    - componentDidUpdate

 

3. UnMounting

 

  해당 컴포넌트가 더이상 필요하지 않고, 컴포넌트가 해제(분리)될 때

 

  React Native 의 실행되는 함수 순서는 

   

    - componentWillUnmount

 

4. Error Handling

 

  생명주기 함수 내, 생성자 내, 모든 하위 컴포넌트의 생성자 내의 렌더링 과정 상에서 에러가 발생할 때

 

   React Native 의 실행되는 함수 순서는 

 

     - getDerivedStateFromError

     - componentDidCatch ( React v16.3 부터 제공 ) 

 

     > getDerivedStateFromError, componentDidCatch는 동일한 에러를 잡는데, 실제 전달되는 인자가 다르다. 

        ~ getDerivedStateFromError 는 "render" 단계에 호출되며, 외부 함수에 의한 영향 ( SideEffect ) 까지 포함되지 않는다. 

        ~ sideEffect가 포함되어야하는 경우에는 componentDidCatch를 사용해야 한다. 

 

위의 4가지 상태에 따라 React Native(React)에서 제공해주는 함수들이 존재하며, 화면 초기화 시점이나 state가 SetState에 의해서 변경될 때, state에 의해서 갱신이 일어날 경우, 아래에 제공하는 함수를 이용해서 우리가 원하는 기능 또는 초기화 작업 등을 처리할 수 있다. 

 

Component Lifecycle은 React v16.3 이전과 이후로 나뉘고, React v17 부터는 이전에 Deprecated된 함수들은 사용할수 없게 되었다. 

 

다음 편에서 실질적인 코드와 상세한 생명주기에 대해서 알아보겠다.