리액트 라이프사이클 이슈

react-dom.development.js:2166 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• 리액트를 개발하다가 위와 같은 이슈에 부딪쳤다. 아마도 하위컴포넌트에서 상태를 Lift-up시키고, 다시 하위컴포넌트로 렌더링을 하는 과정에서 발생한 이슈인거같다.

 componentWillReceiveProps(nextProps, nextContext) {
    const subscriptions = nextProps.data.subscriptions;
    subscriptions.filter((subscription) => {
      if (moment(subscription.renewal).date() === nextProps.date) {
        this.state.result = subscription;
        console.log('after change');
        console.log(this.state.result);
      } else {
        this.state.result = null;
      }
    });
  }

• react의 라이프사이클 관리 메소드중에 componentWillReceiveProps를 통해 해결을 했다. 이 메소드는 상위컴포넌트에서 전달받는 props의 변화가 있을경우, 렌더링을 새로 해준다.

리액트의 라이프 사이클

• 리액트의 컴포넌트 라이프사이클로서 세분화된 컴포넌트들에 대해서 커스터마이즈를 할 수 있다. 이 과정에서 컴포넌트의 렌더링, 업데이트, 리렌더링을 할 수 있다.

Mounting

• contructor, componentWillMount, render, componentDidMound 메서드로 컴포넌트의 인스턴스가 생성되고 DOM에 삽입되는 과정에서의 라이프사이클 메서드.
• 컴포넌트가 처음 실행될때를 Mount라고 한다. 컴포넌트가 시작되면 context, state, defaultProps가 저장된다. 그 후에 ComponentWillMound메서드가 호출되고 render로 컴포넌트를 DOM에 붙인다. 그뒤에 componentDidMound가 호출된다.
• componentWillMound에서는 state, props가 변경되면 안된다 !!! Mount중이기때문에 DOM에 rendering이 않기때문에 DOM에 접근할 수 없다.
• ComponentDidMound에서는 DOM에 접근할 수 있다.
• (state, context, defaultProps)저장. => componentWillMound => render => componentDidMound순으로 진행된다.

Props Updating

• prop의 변경으로 componentWillReceiveProps 메소드가 호출된다. shouldComponentUpdate, componentWillUpdate가 차례대로 호출되고 업데이트가 완료(render)되면 componentDidupdate가 된다.
• shouldComponentUpdate의 경우, render전이기때문에 return false하면 render를 취소할 수 있다.
• componentWillUpdate에서는 state가 바뀌면 안된다. state가 바뀌면 shouldComponentUpdate가 발생한다.

State Updating

• setState호출을 통해 state가 업데이트될때. componentWilReceiveProps메소드는 호출 안된다.
• shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate순으로 실행된다.

오늘의 느낀점

• componentWillReceiveProps메소드를 통해 상위 컴포넌트의 props변화될때 re-rendering이 되는것을 알 수 있었다.

• 위에 있는 코드는 Dashboard컴포넌트의 하위 컴포넌트들인 List, Calandar 컴포넌트에서의 변화를 re-rendering을 한다. Calandar에서 selectedValue가 바뀌면 Dashboard로 Lift-up되고 다시 List로 렌더링이 되는데, 이 과정에서 수시로 변화하는 state에 대한 관리가 필요했다. componentWillReceiceProps를 통해 해결할 수 있었다.