한눈에 보는 React Native 라이프 싸이클( Life Cycle) 설명

React Native를 개발하다보면 컴포넌트가 생성되고 제거될때 발생되는 라이프 싸이클을

알아야 개발이 수월해진다. 

이런 라이프 싸이클을 React Native에서는 이벤트 메소드로 제공하고 있기 때문에

자신이 원하는 소스를 원하는 순서에 작성해 보자

자주 쓰는 메소드는 다시 재정의 하였으니 한번씩 읽어보시길 :D

 

ㅇ컴포넌트 생성

constructor -> componentWillMount -> render -> componentDidMount

보통 constructor에서 state나 변수 초기화 작업을 하고

componentWillMount에서 초기 셋팅값을 조회하여 불러온다.

constructor(props) {
    super(props);
    //초기 state값 셋팅
    this.state = {
      viewAppear: false,
    };
  }

componentWillMount() {
    // 처음 화면이 열릴때 데이터 조회
    this.fetch();
  }

 

ㅇ컴포넌트 제거

componentWillUnmount

componentWillUnmount에서 Listener 제거나 다른 컴퍼넌트에 파라미터 전달 등을 많이 한다.

componentWillUnmount() {
	//소스내 지정한 이벤트가 있으면 해제시켜주자
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }

 

ㅇprop 변경

componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

componentWillReceiveProps 를 통해 부모로 부터 받은 파라미터를 이용한 작업을 많이 한다.

componentWillReceiveProps(props) {
	//부모가 던져준 props를 받자
    let { animating } = this.props;

    if (animating ^ props.animating) {
      if (animating) {
        this.stopAnimation();
      } else {
        this.startAnimation();
      }
    }
  }

 

ㅇstate 변경

shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

shouldComponentUpdate 는  React Native를 최적화 하고자 할때 많이 쓰인다.

state값이 변경되면 이 메소드를 타고 여기서 true를 리턴하면 화면이 변경되고

화면을 변경하지 않고 싶을때 조건을 걸어 false를 리턴하면 된다.

shouldComponentUpdate(nextProps, nextState) {
	//화면을 갱신하고 싶을땐 true 아닐땐 false를 반환시켜 앱을 최적화 시키자
    if (
      nextState.sortedData !== this.state.sortedData ||
      nextState.selectedIndex !== this.state.selectedIndex ||
      nextState.scrollPosition !== this.state.scrollPosition
    ) {
      return true;
    }
    return false;
  }