ReactJs - LifeCycle API

 

 

 

 

LifeCycle API

 

 

 

• 이 API 는 컴포넌트가 브라우저에서 나타날때, 사라질때, 그리고 업데이트 될 때, 호출되는 API 이다.

 

 

 

 

컴포넌트 초기 생성

 

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

 

 

 

 

constructor

constructor(props) {
  super(props);
}

 

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

 

 

 

 

componentDidMount

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

 

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

 

 

 

 

 

 

 

 

컴포넌트 업데이트

 

컴포넌트가 업데이트는 props 의 변화, 그리고 state 의 변화에 따라 결정된다. 업데이트가 되기 전과 그리고 된 후에 호출되는 API가 존재한다. 

 

 

 

 

 

static getDerivedStateFromProps()

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

 

• 이 API 는 props 로 받아온 값을 state 로 동기화 하는 작업을 해줘야 하는 경우에 사용된다.

 

 

 

 

 

shouldComponentUpdate

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

 

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

 

 

 

 

 getSnapshotBeforeUpdate()

 

 

1. render()
2. getSnapshotBeforeUpdate()
3. 실제 DOM 에 변화 발생
4. componentDidUpdate

이 API를 통해서, DOM 변화가 일어나기 직전의 DOM 상태를 가져오고, 여기서 리턴하는 값은 componentDidUpdate 에서 3번째 파라미터로 받아올 수 있게 된다.

 

 

 

 

componentDidUpdate

 

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

 

 

 getSnapshotBeforeUpdate()

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

      // 여기서 반환 하는 값은 componentDidMount 에서 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;
    }
  }

 

 

 

 

 

 

 

컴포넌트 제거

 

컴포넌트가 더 이상 필요하지 않게 되면 단 하나의 API 가 호출된다.

 

 

 

 

componentWillUnmount

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

 

• 여기서는 주로 등록했었던 이벤트를 제거하고, 만약에 setTimeout 을 걸은것이 있다면 clearTimeout 을 통하여 제거를 한다.
• 추가적으로, 외부 라이브러리를 사용한게 있고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출해주면 된다.
• 즉 컴포넌트가 삭제되거나 사라질때 시점에 호출하고 싶은 것을 넣어주면 발동하는 함수이다.

 

 

 

 

 

 

컴포넌트에 에러 발생

 

 

render 함수에서 에러가 발생한다면, 리액트 앱이 크래쉬 되어버리는데 그러한 상황에 유용하게 사용 할 수 있는 API 가 한가지 있다.

 

 

 

 

componentDidCatch

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

 

• 에러가 발생하면 이런식으로 componentDidCatch가 실행되게 하고, state.error 를 true 로 설정하게 하고, render 함수쪽에서 이에 따라 에러를 띄워주면 된다.
• 이 API 를 사용하시게 될 때 주의할 점이 있는데, 컴포넌트 자신의 render 함수에서 에러가 발생해버리는것은 잡아낼 수는 없지만, 그 대신에 컴포넌트의 자식 컴포넌트 내부에서 발생하는 에러들을 잡아낼 수 있다.

 

 

 

예시 코드

import React, { Component } from 'react';

const Promblematic = () => {
  throw (new Error('버그가 나타났다!'));
  return (
    <div>

    </div>
  );
};

class Counter extends Component {
  state = {
    number: 0,
    error: false
  }

  // (...)

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

  render() {
    if (this.state.error) return (<h1>에러발생!</h1>);

    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        { this.state.number === 4 && <Promblematic /> }
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;

 

• 카운터를 4로 올리면 개발자 화면으로 인하여 빨간 에러창이 뜨게 되지만. X 를 눌렀을 때, 앱이 크래쉬되는 것이 아니라 에러가 발생했다는 메시지가 뜨게 된다.
• Problematic은 렌더링이 될 때 에러가 발생했음을 알리는 throw 를 사용하여 개발자 화면의 빨간 에러창에서 표시된다.