React LifeCycle API

컴포넌트 초기생성

컴포넌트가 브라우저에 나타나기 전,후 에 호출되는 API들

constructor

컴포넌트 생성자 함수. 컴포넌트가 새로 만들어질 때마다 이 함수가 호출됨

  constructor(props) {
    super(props);
  }

componentWillMount

v16.3 에서는 해당 API 가 deprecated
기존에 이 API 에서 하던 것들은 위에 있는 constructor 와 아래에서 다뤄볼 componentDidMount 에서 충분히 처리

  componentWillMount() {

  }

componentDidMount

컴포넌트가 화면에 나타나게 됐을 때 호출. 주로 D3, masonry처럼 DOM을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch 등을 통해 ajax요청을 하거나, DOM의 속성을 읽거나 직접 변경하는 작업을 진행

  componentDidMount() {
    // 외부 라이브러리 연동: D3, masonry, etc
    // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc
    // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등
  }

컴포넌트 업데이트

컴포넌트 업데이트는 props의 변화, 그리고 state의 변화에 따라 결정

componentWillReceiveProps

  componentWillReceiveProps(nextProps) {
    // this.props 는 아직 바뀌지 않은 상태
  }

v16.3 부터 deprecated, 이 기능은 상황에 따라 새로운 API getDerivedStateFromProps 로 대체 될 수도 있음
이 API 는 컴포넌트가 새로운 props 를 받게됐을 때 호출
이 안에서는 주로, state 가 props 에 따라 변해야 하는 로직을 작성

static getDerivedStateFromProps

v16.3 이후에 만들어진 라이프사이클 API
이 API 는 props 로 받아온 값을 state 로 동기화 하는 작업을 해줘야 하는 경우에 사용

  static getDerivedStateFromProps(nextProps, prevState) {
    // 여기서는 setState 를 하는 것이 아니라
    // 특정 props 가 바뀔 때 설정하고 설정하고 싶은 state 값을 리턴하는 형태로
    // 사용됩니다.
    /*
    if (nextProps.value !== prevState.value) {
      return { value: nextProps.value };
    }
    return null; // null 을 리턴하면 따로 업데이트 할 것은 없다라는 의미
    */
  }

shouldComponentUpdate

  shouldComponentUpdate(nextProps, nextState) {
    // return false 하면 업데이트를 안함
    // return this.props.checked !== nextProps.checked
    return true;
  }

이 API 는 컴포넌트를 최적화하는 작업에서 매우 유용하게 사용
리액트에서는 변화가 발생하는 부분만 업데이트를 해줘서 성능을 향상
하지만, 변화가 발생한 부분만 감지해내기 위해서는 Virtual DOM 에 한번 그려야함
즉, 현재 컴포넌트의 상태가 업데이트되지 않아도, 부모 컴포넌트가 리렌더링되면, 자식 컴포넌트들도 렌더링 됨, “렌더링” 된다는건, render() 함수 호출됨을 의미
변화가 없으면 물론 DOM 조작은 하지 않게 됨. 그저 Virutal DOM 에만 렌더링
쓸대없이 낭비되고 있는 이 CPU 처리량을 줄여주기 위해서 우리는 Virtual DOM 에 리렌더링 하는것도,불필요할경우엔 방지하기 위해서 shouldComponentUpdate 사용
이 함수는 기본적으로 true 를 반환. 우리가 따로 작성을 해주어서 조건에 따라 false 를 반환하면 해당 조건에는 render 함수를 호출하지 않음.

componentWillUpdate

  componentWillUpdate(nextProps, nextState) {

  }

v16.3 이후 deprecated, 기존의 기능은 getSnapshotBeforeUpdate 로 대체
이 API는 shouldComponentUpdate 에서 true 를 반환했을때만 호출. 만약에 false 를 반환했었다면 이 함수는 호출되지 않음
주로 애니메이션 효과를 초기화하거나, 이벤트 리스너를 없애는 작업. 함수가 호출되고난 다음에는, render() 가 호출

getSnapshotBeforeUpdate

API가 발생하는 시점
1. render()
2. getSnapshotBeforeUpdate()
3. 실제 DOM 에 변화 발생
4. componentDidUpdate
이 API를 통해서, DOM 변화가 일어나기 직전의 DOM 상태를 가져오고, 여기서 리턴하는 값은 componentDidUpdate 에서 3번째 파라미터로 받아올 수 있게 됨

   getSnapshotBeforeUpdate(prevProps, prevState) {
    // DOM 업데이트가 일어나기 직전의 시점입니다.
    // 새 데이터가 상단에 추가되어도 스크롤바를 유지해보겠습니다.
    // scrollHeight 는 전 후를 비교해서 스크롤 위치를 설정하기 위함이고,
    // scrollTop 은, 이 기능이 크롬에 이미 구현이 되어있는데, 
    // 이미 구현이 되어있다면 처리하지 않도록 하기 위함입니다.
    if (prevState.array !== this.state.array) {
      const {
        scrollTop, scrollHeight
      } = this.list;

      // 여기서 반환 하는 값은 componentDidUpdate 에서 snapshot 값으로 받아올 수 있습니다.
      return {
        scrollTop, scrollHeight
      };
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      const { scrollTop } = this.list;
      if (scrollTop !== snapshot.scrollTop) return; // 기능이 이미 구현되어있다면 처리하지 않습니다.
      const diff = this.list.scrollHeight - snapshot.scrollHeight;
      this.list.scrollTop += diff;
    }
  }

componentDidUpdate

  componentDidUpdate(prevProps, prevState, snapshot) {

  }

이 API는 컴포넌트에서 render() 를 호출하고난 다음에 발생
이 시점에선 this.props 와 this.state 가 바뀌어있음. 그리고 파라미터를 통해 이전의 값인 prevProps 와 prevState 를 조회
getSnapshotBeforeUpdate 에서 반환한 snapshot 값은 세번째 값으로 받아옴

컴포넌트 제거

componentWillUnmount

  componentWillUnmount() {
    // 이벤트, setTimeout, 외부 라이브러리 인스턴스 제거
  }

등록했었던 이벤트를 제거하고, 만약에 setTimeout 을 걸은것이 있다면 clearTimeout 을 통하여 제거
추가적으로, 외부 라이브러리를 사용한게 있고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출해주면 됨

컴포넌트에서 에러 발생

componentDidCatch

  componentDidCatch(error, info) {
    this.setState({
      error: true
    });
  }

render 함수에서 에러가 발생한다면, 리액트 앱이 크래쉬 됨. 그러한 상황에 유용하게 사용 할 수 있는 API
에러가 발생하면 이런식으로 componentDidCatch 가 실행되게 하고, state.error 를 true 로 설정하게 하고, render 함수쪽에서 이에 따라 에러를 띄워주면 됨
주의사항은 컴포넌트 자신의 render 함수에서 에러가 발생해버리는것은 잡아낼 수는 없지만, 그 대신에 컴포넌트의 자식 컴포넌트 내부에서 발생하는 에러들을 잡아낼 수 있음

Twitter Facebook LinkedIn