[React] LifeCycle API

1. LifeCycle API

LifeCycle API는 나타날 때, 업데이트 될 때, 사라질 때 등 상황에 맞게 사용할 수 있는 다양한 API가 존재한다.

LifeCycle API

1) 컴포넌트 초기 생성

컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API들은 다음과 같다.

• constructor
• componentDidMount: 외부 라이브러리 연동(D3, masonry, 등), 컴포넌트에 필요한 데이터 요청(Ajax, GraphQL, 등), DOM에 관련된 작업(스크럴 설정, 크기 읽기, 등)을 수행한다.

 

...
  componentDidMount() {
    console.log(this.mDiv.getBoundingClientRect()); // 특정 DOM의 정보 확인
  }
  
  render () {
    return (
      <div ref={ref => this.myDiv = ref}>
        안녕하세요
      </div>
    )
  }
...

2) 컴포넌트 업데이트

컴포넌트 업데이트는 props의 변화, state의 변화에 따라 결정된다. 업데이트가 되기 전과 후에 대한 API는 다음과 같다.

• static getDerivedStateFromProps: 특정 props가 바뀔 때 설정하고, 설정하고 싶은 state 값을 반환한다.
• shouldComponentUpdate: 컴포넌트 업데이트 성능을 추적할 수 있다. 최적화하는 작업에서 매우 유용하게 사용된다. update를 막아주는 함수라고 생각하면 쉽다.
• getSnapshotBeforeUpdate: 컴포넌트가 업데이트되어서 브라우저의 DOM에 반영되기 직전에 호출되는 함수이다. DOM 변화가 일어나기 적전의 DOM 상태를 가져오고 여기서 리턴하는 값은 componentDidUpdate에서 3번째 파라미터로 받아올 수 있다.
• componentDidUpdate

 

import React, { Component } from 'react';

class MyComponent extends Component {
  state = {
    value: 0
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.value !== nextProps.value) {
      return {
        value: nextProps.value
      };
    }
    return null;
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.value === 10) return false;
    return true;
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.value !== prevProps.value) {
      console.log('value 값이 바뀌었다!', this.props.value);
    }
  }

  componentWillUnmount() {
    console.log('Good Bye');
  }

  render() {
    return (
      <div>
        {/*this.props.missing.something */}
        <p>props: {this.props.value}</p>
        <p>state: {this.state.value}</p>
      </div>
    );
  }
}

export default MyComponent;

3) 컴포넌트 에러

• componentDidCatch: 오류가 발생할 경우, 에러 정보와 발생 위치 정보를 확인하거나 에러 발생 시 사용자에게 보여줄 수 있는 화면을 설정할 수 있다.

---

[참고] react-anyone.vlpt.us/01.html