1lines

Reactive Native App 개발기 6-2 에서 알아본 Component Lifecycle 상에 제공되는 함수들의 용도와 활용방법에 대해서 알아보겠다.

Mounting

• constructor

       만약 state를 초기화 하거나 함수를 바인딩 하는 것이 아니라면, 해당 Component를 위한 constructor는 구현할 필요가 없다.   

       constructor는 마운트 되기 전에 호출된다. react component의 constructor를 구현할 때, 다른 문자을 작성하기 전에 super(props)

       를 반드시 호출해야한다. 그렇지 않으면 this.props 는 constructor에서 undefined으로 찾을수 없다. 

        constructor는 주로 아래의 2가지를 위해서 사용되는데, 

          1. this.state 를 초기화 할 때. 

          2. event handler 함수를 객체에 바인딩할 때. 

        constructor 내부에서 setState를 호출해서는 안되고 필요한 경우, this.state를 이용하여 선언시에 초기값으로 직접 값을 설정해야한다. side-effect(외부간섭/부가효과) 또는 구독을 constructor에서 처리하는 것을 피해야한다. 필요한 경우 componentDidMount를 대신 사용해야한다. 

• static getDerivedStateFromProps(props, state)

        해당함수는 render 함수가 호출되고 난 이후에 바로 실행된다. 초기 마운트 시점과 구독 갱신 시점에 모두 영향을 받으며, 상태를 업데이트 하기 위해서 객체를 하거나 아무것도 업데이트 하지 않기 위해서 null을 반환해야 한다. 

        1. 만약 부가 효과를 실행해야 한다면, componentDidUpdate를 활용하라. 

        2. prop가 변경되었을 때 일부 데이터에 대해서만 재계산하고 싶다면, 메모제이션을 활용해야한다.

        3. 만약 일부 state를 초기화하고 싶다면, 해당 링크의 방식(fully controlled  , fully uncontrolled)을 활용할수 있다. 

• render()

        render 함수는 class 컴포넌트에서 필요한 함수로써, function 컴포넌트에서는 필요하지 않다. 

        render 함수는 shouldComponentUpdate의 반환 값이 false 일 경우 실행되지 않는다.  

• componentDidMount()

        Component가 마운트되고 난후 즉시 componentDidMount가 실행된다. Dom 노드에 대한 초기화가 필요한 경우 여기에서 작업해야한다. 원격의 Endpoint로 부터 데이터를 가져와야하는 경우에도 해당 함수의 위치에서 진행하면 된다. 만약 setState를 이 함수안에서 사용한다면 rendering을 발생시킬 것이고 이는 브라우저가 해당 화면을 갱신하기 전에 발생한다. 이것은 비록 render가 두번 호출되더라도 사용자가 중간과정을 보지 않을 수 있도록 보장한다. 하지만 이 패턴은 성능 상의 이슈를 야기할 수 있기 때문에 주의해야한다. 

 따라서 가능하다면 constructor()에서 초기값을 할당할 수 있도록 해야한다./

Updating 

• static getDerivedStateFromProps(props, state) 
• shouldComponentUpdate(nextProps, nextState)

        해당 함수는 React가 component의 결과아 state나 props의 변화에 의해 영향 받지 않았을 경우 shouldComponetUpdate에 의해 알릴 수 있다. 해당 함수는 신규 props나 state의 변화에 의해 rendering되기 전에 실행된다. 기본 값은 true이며 forceUpdate가 실행된 경우에는 해당 함수를 호출되지 않는다. 

        이 함수는 성능 최적화로써 오로지 존재하는데, shouldComponentUpdate를 사용하는 것대신에 PureComponent를 사용하는 것을 고려하라. 

       결과값을 false로 반환할 경우, UNSAFE_componentWillUpdate, render, componentDidUpdate를 실행하지 않을 것이다. 

• render()
• getSnapshotBeforeUpdate(prevProps. prevState)

      가장 최근의 렌더링된 결과가 commit 되었을 때 실행된다. 이 함수는 정보가 잠재적으로 변경될 가능성이 있을때, 컴포넌트가 Dom으로 부터 일부 정보를 보관하는 것을 허용한다. 생명주기 족에서 반환된 모든 값은 파라미터로 componentDidUpdate()로 전달될것이다. 

• componentDidUpdate(prevProps, prevState, snashot)

       해당 함수는 갱신이 일어난 후에 즉시 실행된다. 해당 함수는 초기 render를 위해서 호출되지 않는다. 

       해당 함수는 컴포넌트가 갱신되었을 때, DOM에 대해서 처리할 수 있는 기회로 사용하면 된다. 이는 네트워크 요청등의 처리를 하기에 적합하다. 

UnMounting

• componentWillUnMount

        해당함수는 컴포넌트가 언마운트 되기 전이나 제거될 때 호추된다. 해당 함수안에서 초기화 및 정리를 실행할 수 있다. 

ErrorHandling 

• static getDerivedStateFromError()

       해당 생명 주기는 상위 Component(해당 함수를 선언한 컴포넌트)를 감싸고 있는 자식(하위)컴포넌트에서 에러가 발생하였을 경우 실행된다. 파라미터로 전달된 에러를 받을 수 있고 state를 갱신하기 위한 값을 반환해야 한다. 

• componentDidCatch(error, info)

      해당 생명 주기는 상위 Component(해당 함수를 선언한 컴포넌트)를 감싸고 있는 자식(하위)컴포넌트에서 에러가 발생하였을 경우 실행된다. 파라미터로 전달된 에러를 받을 수 있고 state를 갱신하기 위한 값을 반환해야 한다. 

     2개의 파라미터를 전달받는데, 

       1. error - 전달된 Error

       2. info - 컴포넌트(에러를 던진 컴포넌트에 대한 정보를 포함하는 키) 스택가지고 있는 객체 

기존의 생명주기 함수들

  아래의 함수들은 version 17 까지는 동작할 예정이다. 하지만 16.3 이후로 정립된 생명주기 함수들을 활용하여 개발하는 것을 추천한다. 

이전부터 컴포넌트의 생명주기와 관련된 함수들에 대한 많은 이슈가 있어왔고 이를 해소하고자 16.3 이후 부터 위의 함수들을 제공하고 있다. 

 UNSAFE_componentWillMount()

    마운팅이 일어났을 때, 실행된다. 이 것은 render 함수 전에 실행된다. 

 UNSAFE_componentReceiveProps()

    해당 함수의 경우, 버그와 불일치성을 초래하고 있다. 따라서 사용하지 않는 것을 권고한다. 

    마운트된 컴포넌트가 새로운 props를 받았을 때 실행된다. 

 UNSAFE_componentWillUpdate()

     새로운 props나 state를 받았을 때, 실행된다. 

    해당함수는 만약 shouldComponentUpdate가 false를 반환할 경우 실행되지 않을 것이다. 

3편에 걸쳐서 컴포넌트의 생명주기에 대해서 알아보았다. 

지난 편(React Native App 개발기 6-1)에서 알아본 컴포넌트 생명주기에 대해서 코드로 알아보려 한다. 

 아래의 설명한 사항은 React Version 16.4를 기준으로 동작하는 함수 및 절차이다. 

React Native 메인  

 - Component의 생명 주기를 알아보기 위해서 Main Component를 Import하여 아래와 같이 사용하였다. 

 - React Hook의 useState를 이용해서 함수 내에서 state를 사용하여 상태를 Main Component로 전달하였다. 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { useState } from 'react';
import { View,  Text, Button } from 'react-native';
import Main from './src/pages/Main';
import ErrorBoundary from './src/pages/Error'

const App = () => {

  const [ value, setValue ] = useState({ data : "" });

  const onPressEvent = () => {
    setValue({ data : "11" });
  }


  return (
    <>
      <ErrorBoundary>
        <View style={{ flex : 1, justifyContent : 'center', alignItems:'center' }} >
          <Text>Component Life Cycle 입니다.</Text>
          <Button title="클릭" onPress={onPressEvent} ></Button>
        </View>
        <Main stateProps={value} propsData={11} />
      </ErrorBoundary>
    </>
  );
};

export default App;

React Native ErrorBoundary

import React, { Component } from 'react';


class ErrorBoundary extends Component {
    constructor(props) {
      super(props);
    }

    static getDerivedStateFromError(){
        console.log("getDerivedStateFromError");
    }
  
    render() {
      return this.props.children;
    }
}

export default ErrorBoundary;

React Native Main

 - Component Lifecycle에 활용되는 모든 함수를 아래와 같이 정의하여 Component 호출 시점, Props 전달 시점, State 전달 시점을 알아보려한다.  

 - 각각의 함수에 console.log를 추가하여 호출 시점을 알아보겠다.

import React, { Component } from 'react';
import {
  View,
  Text,
} from 'react-native';

class Main extends Component{
    constructor(props){
        super(props);

        console.log("constructor");
    }

    static getDerivedStateFromProps(props, state){
        console.log("getDerivedStateFromProps") ;  
    }

    shouldComponentUpdate(nextProps, nextState){
        console.log("shouldComponentUpdate");
    }

    getSnapshotBeforeUpdate(prevProps, prevState){
        console.log("getSnapshotBeforUpdate");
    }

    componentDidMount(){
        console.log("componentDidMount");
    }
    
    componentWillUnmount(){
    	console.log("componentWillUnmount");
    }

    render(){
        return (
            <View style={{flex : 1, justifyContent : 'center', alignItems:'center' }} >
                <Text>Component 입니다.</Text>
            </View>
        )
    }
}

export default Main;

 - 메인화면이 호출될 때, ( command + R 을 눌러 메인화면을 새로고침 했다. )

호출 순서 : constructor -> getDerivedStateFromProps -> componentDidMount 

 - 메인화면에서 버튼을 클릭했을 때, ( React Hook을 이용해 state를 component로 전달했다. )

 호출 순서 : getDerivedStateFromProps -> shouldComponentUpdate 

 - 메인화면에서 다른 화면으로 전환될 때

 호출 순서 : componentWillUnmount 

 - ErrorBoundary를 감싸고 있는 하위 컴포넌트에서 에러가 발생했을 때, 

 호출 순서 : getDerivedStateFromError

Mounting에서 부터 Unmounting 까지의 절차는 아래의 Link에서 가져온 이미지에서 잘 정리되어 있었다. 

다음편에서 16.3 기점으로 나뉜 컴포넌트 생명주기 함수들에 대해서 자세히 설명할 예정이다. 

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

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

Component's 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된 함수들은 사용할수 없게 되었다. 

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