Component Lifecycle - MoonGyeongHyeon/React_Study GitHub Wiki

React - Component Lifecycle

예제(1,2)에서 Component Lifecycle을 이용하여 구현한 부분이 있었다. 이번에 좀 더 자세히 알아보도록 하자.

Component 생성

컴포넌트가 생성될 때 constructor -> componentWillMount -> render -> componentDidMount 순으로 호출이 된다. 컴포넌트가 제거될 때엔 componentWillUnmount 만 호출된다.

props, state가 변경될 때

컴포넌트의 props가 변경될 때 componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate-> render -> componentDidUpdate 순으로 호출이 된다. state의 경우, shouldComponentUpdate 부터 호출이 된다.

전체 과정

각 메소드 설명

• constructor

  constructor(props){
      super(props);
      console.log("constructor");
  }
  

  생성자로 컴포넌트가 처음 만들어질 때 호출된다. 기본 state를 초기화할 수 있다.

  ​

• componentWillMount

  componentWillMount(){
      console.log("componentWillMount");
  }
  

  컴포넌트가 DOM 위에 만들어지기 전에 호출된다.

  ​

• render

  컴포넌트 렌더링을 담당한다.

  ​

• componentDidMount

  componentDidMount(){
      console.log("componentDidMount");
  }
  

  컴포넌트가 다 만들어지고 첫 렌더링까지 끝난 후 호출된다. 여기서 다른 Javascript 프레임워크를 연동하거나 setTimeout, setInterval 및 AJAX 처리 등을 수행한다.

  ​

• componentWillRecevieProps

  componentWillReceiveProps(nextProps){
      console.log("componentWillReceiveProps: " + JSON.stringify(nextProps));
  }
  

  컴포넌트가 새로운 props를 받았을 때 호출된다. props에 따라 state를 업데이트해야 할 때 사용하면 유용하다. 현재props ( this.props ) 와 다음 props ( nextProps ) 를 적절히 이용하도록 하자. 이 안에서 this.setState 메소드를 호출해도 추가적인 렌더링을 진행하지 않는다.

  ​

• shouldComponentUpdate

  shouldComponentUpdate(nextProps, nextState){
      console.log("shouldComponentUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState));
      return true;
  }
  

  props 또는 state가 변경됐을 때, 리렌더링 할지 말지를 정하는 메소드이다. 반환 값에 따라 결정된다.

  return nextProps.id !== this.props.id; 처럼 특정 필드만을 비교/확인 할수도 있고, JSON.stringify() 를 써서 여러 필드를 비교 할 수도 있다.

  참고로, React 공식 문서에선 JSON.stringify() 를 통한 비교는 매우 비효율적이고 성능에 악영향을 끼치기 때문에 권장하지 않는다.

  ​

• componentWillUpdate

  componentWillUpdate(nextProps, nextState){
      console.log("componentWillUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState));
  }
  

  컴포넌트가 업데이트되기 전에 실행된다. 여기서 만약 this.setState 를 호출할 경우 무한루프에 빠지게 되니 주의하도록 하자.

  ​

• componentDidUpdate

  componentDidUpdate(prevProps, prevState){
      console.log("componentDidUpdate: " + JSON.stringify(prevProps) + " " + JSON.stringify(prevState));
  }
  

  컴포넌트가 리렌더링을 마친 후 호출된다.

  ​

• componentWillUnmount

  componentWillUnmount(){
      console.log("componentWillUnmount");
  }
  

  컴포넌트가 DOM에서 사라진 후 호출된다.