비실이의 개발 성장기

getDerivedStateFromProps() / getSnapshotBeforeUpdate() 메서드 확인 본문

프론트엔드/react.js

getDerivedStateFromProps() / getSnapshotBeforeUpdate() 메서드 확인

DubbingLee 2018. 8. 31. 20:07



getDerivedStateFromProps() 와 getSnapshotBeforeUpdate() 메서드는 React v16.3.0 에서 새로 추가된 lifecycle 메서드다.



새로 추가 된 getDerivedStateFromProps(), getSnapshotBeforeUpdate() 메서드와 


deprecated 예정 인 componentWillMount(), componentWillUpdate(), componentWillReceiveProps() 메서드를 혼용하여


사용하면 warning이 발생하게 된다.



componentWillMount(), componentWillUpdate(), componentWillReceiveProps() 에서 처리하던 로직은 


getDerivedStateFromProps() 를 통하여 마이그레이션 가능하다.







getDerivedStateFromProps(nextProps, prevState)



메서드 호출시점


컴포넌트가 최초 마운팅 됐을 경우부모 컴포넌트에서 전달해주는 props가 변경 되었을 경우 호출되며, 


render() 메서드가 호출되기 이전에 호출된다.


react 16.3 에서 현재 컴포넌트의 state 만 변경이 발생한 경우에는 호출되지 않는다.


react 16.4 부터는 현재 컴포넌트의 state 만 변경이 발생한 경우에도 호출되도록 변경되었다.


[react lifecycle diagramhttp://projects.wojtekmaj.pl/react-lifecycle-methods-diagram]



사용방법


getDerivedStateFromProps(nextProps, prevState) 메서드는 static 키워드를 붙여서 인스턴스 메서드로 선언해야 한다.


첫번째 인자(nextProps) 는 부모 컴포넌트로 부터 전달받는 객체이며,


두번째 인자(prevState) 는 렌더링되기 이전의 state 객체다.


getDerivedStateFromProps() 메서드를 선언하고 따로 return 하지 않을 경우에는 warning이 발생하게 된다.


return 하는 데이터는 객체여야 한다.



메서드 활용


render() 메서드가 호출되기 전이므로, 변경 된 props 데이터를 state에 반영하는 작업을 이 메서드에서 처리하면 된다.







getSnapshotBeforeUpdate(prevProps, prevState)



메서드 호출시점


컴포넌트 최초 마운트 시에는 호출되지 않는다.


props, state 업데이트가 발생하여 render() 메서드가 호출된 뒤 즉시 호출되는 메서드다.



사용방법


getSnapshotBeforeUpdate() 메서드는 데이터를 return 해야하며, return 된 데이터는 


componentDidUpdate() 메서드의 세번째 인자로 전달된다.


만약 return 을 명시하지 않을 경우에는 warning 이 발생하게 된다.


또, getSnapshotBeforeUpdate() 메서드를 선언 해놓고 componentDidUpdate() 메서드를


선언하지 않을 경우에도 warning이 발생한다.



메서드 활용


getSnapshotBeforeUpdate() 메서드에서


DOM 변경 이전 상태를 snapshot 하여 return 하고, DOM 변경이 완료된 후 호출되는


componentDidUpdate() 메서드에서 snapshot 데이터를 참고하여 작업을 처리할 때 사용할 수 있다.


React 공식페이지에서는 scroll bar 위치를 예로 하여 설명하고 있다.


<https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate>






getDerivedStateFromProps() / getSnapshotBeforeUpdate() 사용 간단 프로젝트


<https://github.com/2dubbing/react-v16-example>






0 Comments
댓글쓰기 폼