[React] LifeCycle 소개 및 사용법

LifeCycle API

• 한국어로 번역하자면 '생명주기' 라고 할 수 있다.

• 컴포넌트가 브라우저 상에서

  • 나타날 때
  • 업데이트 될 때
  • 사라질 때

• 중간 중간 과정에서 어떤 작업을 하고 싶을 때 LifeCycle API를 사용할 수 있다.

• LifeCycle API의 종류는 많다.

  constructor, getDerivedStateFromProps, componentDidMount, shoudComponentUpdate, getSnapshotBeforeUpdate, componentDidUpdate, componentWillUnmount, ...

Mounting

• 컴포넌트가 우리 브라우저 상에 나타난다는 것을 의미한다.

Updating

• 컴포넌트의 props가 바뀌거나 state가 바뀌었을 때를 의미한다.

Unmounting

• 컴포넌트가 우리 브라우저 상에서 사라질 때를 의미한다.

  

constructor

• 컴포넌트 생성자 함수
• 컴포넌트가 새로 만들어질 때마다 이 함수가 호출된다.
• 우리가 만든 컴포넌트가 처음 브라우저 상에 나타나게 될 때 만들어지는 과정에서 가장 먼저 실행되는 함수
• 컴포넌트가 가지고 있을 state 초기 설정을 하거나 컴포넌트가 생성되는 과정에서 미리 해야할 작업을 constructor에서 처리

constructor(props) {
    super(props);
}

import React, { Component } from 'react';

class App extends Component {
  // constructor
  // 컴포넌트 생성자 함수
  // 컴포넌트가 새로 만들어질 때마다 이 함수가 호출된다.
  constructor(props) {
    super(props); // 컴포넌트가 원래 가지고 있던 생성자 함수를 먼저 호출해주어야 한다.
    console.log('constructor');
  }

  render() {
    return (
      <div ref={ ref => this.myDiv = ref}>
        <h1>안녕하세요 리액트</h1>
      </div>
    );
  }
}

export default App;

getDerivedStateFromProps()

• 이 함수는 v16.3 이후에 만들어진 라이프사이클 API
• props로 받아온 값을 state로 동기화하고 싶을 때 사용
• Mounting과 Updating 과정에서도 props가 바뀌게 되면 사용

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

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

render

• render 함수
• 어떤 DOM을 만들게 될지 내부에 있는 태그에는 어떤 값을 전달해줄지 결정

componentDidMount

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

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

import React, { Component } from 'react';

class App extends Component {
  // constructor
  // 컴포넌트 생성자 함수
  // 컴포넌트가 새로 만들어질 때마다 이 함수가 호출된다.
  constructor(props) {
    super(props); // 컴포넌트가 원래 가지고 있던 생성자 함수를 먼저 호출해주어야 한다.
    console.log('constructor');
  }

  componentDidMount() {
    console.log('componentDidMount');
    console.log(this.myDiv.getBoundingClientRect().height);
  }

  render() {
    return (
      <div ref={ref => this.myDiv = ref}>
        <h1>안녕하세요 리액트</h1>
      </div>
    );
  }
}

export default App;

shouldComponentUpdate

• 이 API는 컴포넌트를 최적화하는 작업에서 매우 유용하게 사용된다.
• 리액트에서는 변화가 발생하는 부분만 업데이트를 해줘서 성능이 잘나온다. 하지만, 변화가 발생한 부분만 감지하기 위해서는 Virtual DOM에 한번 그려줘야 한다. 변화가 없으면 DOM 조작은 하지 않고 Virtual DOM에만 렌더링할 뿐이다. 이 작업은 부하가 많은 작업은 아니지만, 컴포넌트가 무수히 많이 렌더링된다면 달라진다.
• 즉 현재 컴포넌트의 상태가 업데이트되지 않아도, 부모 컴포넌트가 리렌더링되면, 자식 컴포넌트들도 렌더 함수가 실행된다. 이것이 불필요할 때 Virtual DOM에 그리는 작업을 최적화 한다.
• true나 false 값을 반환할 수 있다.
• true를 반환하면 Virtual DOM에 렌더링 프로세스를 진행하고 false를 반환하면 렌더링이 되지 않고 실제로 화면에도 반영되지 않는다.
• virtual DOM 에 렌더링할지 말지를 결정한다. 여기서 렌더링된다는 것은 render() 함수가 호출된다는 의미이다.

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

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

getSnapshotBeforeUpdate()

• 이 api가 발생하는 시점은 다음과 같다.
  • 1. render()
  • 2. getSnapshopBeforeUpdate()
  • 3. 실제 DOM에 변화 발생
  • 4. componentDidUpdate
• 이 aip를 통해서, DOM 변화가 일어나기 직전의 DOM 상태를 가져오고, 여기서 리턴하는 값은 componentDidUpdate에서 3번째 파라미터로 받아올 수 있다.
• 렌더링을 하고 나서 업데이트하기 전에 스크롤의 위치, 해당 DOM의 크기 등을 가져오고 싶을 때 사용

getSnapshotBeforeUpdate(preProops, prevState) {
    // DOM 업데이트가 일어나기 직전의 시점입니다. 
}

componentDidUpdate

• State가 바뀌었을 때 이전의 상태와 지금의 상태가 바뀌었을 때 어떤 작업을 하고 싶을 때 사용
• 이 api는 컴포넌트에서 render()를 호출하고난 다음에 발생한다.
• 이 시점에서는 this.props와ㅏ this.state가 바뀌어있다. 그리고 파라미터를 통해 이전의 값인 preProps와 prevState를 조호히ㅏㄹ 수 있다.
• 그리고 getSnapshotBeforeUpdate에서 반환한 snapshot 값은 세번째 값으로 받아온다.

componentDidUpdate(prevProps, prevState, snapshot) {

}

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

componentWillUnmount

• 컴포넌트가 사라지는 과정에서 호출되는 함수
• componentDidMount에서 설정한 작업을 제거할 때 사용
• 컴포넌트가 더 이상 필요하지 않게 되면 단 하나의 api가 호출된다.
• 여기서는 주로 등록했었던 이벤트를 제거하고, 만약에 setTimeout을 걸은 것이 있다면 clearTimeout을 통하여 제거한다.
• 외부 라이브러리를 사용한게 있고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출한다.

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

componentDidCatch

• render 함수에서 에러가 발생하면, 리액트 앱이 크래쉬 된다. 이 상황에서 유용하게 사용할 수 있는 API가 있다.

componentDidCatch(error, info) {
   this.setState({
     error: true
   });
    // API를 통해서 서버로 오류 내용 날리기
}

• 에러가 발생하면 componentDidCatch가 실행되게 하고, state.error가 true로 설정된다. render 함수에서 이에 따라 에러를 띄워주면 된다.
• 컴포넌트 자신의 render 함수에서 에러가 발생하는 것은 잡아낼 수 없지만, 컴포넌트의 자식 컴포넌트 내부에서 발생하는 에러들은 잡아낼 수 있다.

 

내용출처

https://www.inflearn.com/course/react-velopert