라이프사이클

React 에서 가장 어렵고 심오하고 힘들고 지치는 세가지를 뽑으라면 나는

• Server-side rendering
• code splitting (feat. webpack)
• Life-cycle

이라고 생각한다. 아직도 생각하고 앞으로도 생각 할 것 같다.

일단 간단하게 생각해보자.

이전에도 말했다 시피 hook 은 제외하고 이야기 해보겠다.

아래에는 react 에서 제공하는 라이프 사이클을 나열 한 것이다.

import React from "react";

class LifeCycle extends React.Component {
  constructor(props) {
    super(props);
  }

  /**
   * 이건 이제 안쓴다.
   * 컴포넌트가 마운트 되기 전 실행한다.
   */
  componentWillMount() {}

  /**
   * 컴포넌트가 마운트 된 후 실행한다.
   * 이곳에서 직접 DOM 에 접근 할 수 있다.
   */
  componentDidMount() {}

  /**
   * 컴포넌트가 props 를 전달 받으면 실행한다.
   */
  componentWillReceiveProps(nextProps) {}

  /**
   * props 또는 state 가 변경될 때 랜더링을 할 지, 말 지 결정한다.
   * 기본값을 true 이다. false 경우 랜더링 되지 않는다.
   */
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

  /**
   * props 와 state 가 업데이트 되기 직전에 수행한다.
   */
  componentWillUpdate(nextProps, nextState) {}

  /**
   * 컴포넌트가 업데이트 된 직후 수행한다.
   */
  componentDidUpdate(prevProps, prevState) {}

  /**
   * 컴포넌트가 마운트에서 해제 될 때 수행한다.
   */
  componentWillUnmount() {}

  /**
   * 컴포넌트가 랜더링 될 때 실행되는 메서드이다.
   */
  redner() {}
}

단순하게 리액트에서 제공하는 라이프 사이클은 이렇게 나열 할 수 있는데, 아래 그림이 더 잘 나타내었다고 본다.

라이프사이클을 잘 염두해 두고 개발하도록 하자.

모른체로 개발하다보면 삽질에 삽질을 거듭하는 나 자신을 발견 할 수 있을 것이다.