5.6.1 componentWillReceiveProps(newProps)

componentWillReceiveProps(newProps)는 컴포넌트가 새로운 속성을 전달받을 때 실행된다. 이 단계를 들어오는 속성의 전환이라고 한다. componentWillReceiveProps(newProps)는 컴포넌트에 새로운 속성을 받아오는 시점에 끼어들어서 render()를 호출하기 전에 일부 로직을 추가할 수 있다.

componentWillReceiveProps(newProps) 메서드는 새로운 속성을 인자로 받는다. 컴포넌트를 최초로 렌더링할 때는 실행되지 않는다. 이 메서드는 새로운 속성을 전달받고 다시 렌더링이 이뤄지기 전, 새로운 속성에 따라 상태를 변경하려는 경우에 유용하다. 기존 속성 값은 this.props 객체에 있다. 예를 들어 다음의 예제 코드는 불 값인 isVisible을 기준으로 하여, CSS에 사용할 opacity 상태 값을 변경한다(true이면 1, false이면 0).

componentWillReceiveProps(newProps) {
  this.setState({
      opacity: (newProps.isVisible) ? 1 : 0
  })
}

 

일반적으로 componentWillReceiveProps(newProps)에서 setState() 메서드를 호출해도 추가로 다시 렌더링이 발생하지는 않는다.

새로운 속성을 전달받을 때, 반드시 새로운 값(현재 속성과 다른 값)을 가지고 있지 않을 수도 있다. 왜냐하면 React 입장에서는 속성 값이 변경되었는지 알 수 있는 방법이 없기 때문이다. 따라서 componentWillReceiveProps(newProps)는 속성 값의 변경과 상관없이 (부모 구조 또는 호출에 따라) 재렌더링이 이뤄질 때마다 실행된다. 그러므로 newProps가 항상 현재 속성과 다른 값이라고 가정할 수 없다.