Jello's development blog

Jello's development blog

React 컴포넌트 라이프사이클

React에는 컴포넌트가 생성되거나, 리렌더링 전후에 실행되는 라이프사이클 메소드가 있다. 이 함수들을 사용하여 각 이벤트가 일어날 때에 유용하게 사용할 수 있다.

React lifecycle methods sequence

컴포넌트를 생성할 때에는 다음과 같은 순서로 메소드가 실행된다.

  1. constructor
  2. componentWillMount
  3. render
  4. componentDidMount

컴포넌트를 제거할 때에는 다음 메소드만 실행된다.

  • componentWillUnmount

컴포넌트의 state가 변경될 때(setState)에는 다음과 같은 순서로 메소드가 실행된다.

  1. shouldComponentUpdate
  2. componentWillUpdate
  3. render
  4. componentDidUpdate

컴포넌트의 props가 변경될 때에는 다음과 같은 순서로 메소드가 실행된다.

  1. componentWillReceiveProps
  2. [state가 변경될 때와 같음]

Lifecycle methods

Contructor(props)

생성될 때 전달받은 props가 매개변수로 전달된다. constructor를 이용하여 props를 가공해 초기 state를 설정하기 편리하다.

constructor(props) {
  // React.Component 클래스로부터 상속받을 경우
  super(props);
  
  this.state = {
    color: props.initialColor
  };
}

componentWillReceiveProps(nextProps)

컴포넌트가 새로운 props를 받기 전에 실행되는 메소드다. 새롭게 넘어온 props를 매개변수로 받는다.

shouldComponentUpdate(nextProps, nextState)

가장 눈여겨봐야 할 메소드. 컴포넌트를 업데이트하기 전에 업데이트 여부를 결정하기 위해 실행된다. 새롭게 넘어온 props와 state를 매개변수로 받는다.

리턴값(true나 false)에 따라서 리렌더링의 여부가 결정된다. 기본값은 true라서 불필요한 렌더링이 일어나는 컴포넌트는 작성해주면 퍼포먼스를 최적화할 수 있다. forceUpdate로 업데이트를 강제해주면 이 함수는 실행되지 않는다. 또한 false를 반환한다면 다음 순서인 componentWillUpdate, render, componentDidUpdate 메소드는 실행되지 않는다.

React.Component를 상속받은 React.PureComponent를 사용하면 이 메소드는 props와 state를 얕은 비교(shallow comparison)를 하여 이전값과 이후값이 일치했을 때에 false를 반환하여 리렌더링을 막을 수 있다.

componentWillUpdate(nextProps, nextState)

컴포넌트가 업데이트되기 직전에 실행되는 메소드. shouldComponentUpdate과 같이 다음 props와 state를 매개변수로 받는다.

componentDidUpdate(prevProps, prevState)

컴포넌트가 업데이트된 직후에 실행되는 메소드. 업데이트되기 전의 props와 state를 매개변수로 받는다.