Page 25 -

따로 생성하지 않으면 기본적으로 언제나 true 값을 반환합니다. 이 메서드가 false 값을 반환한
다면 업데이트 과정은 여기서 중지됩니다.

이 메서드 안에서 현재 props와 state는 this.props와 this.state로 접근하고, 새로 설정될 props
또는 state는 nextProps와 nextState로 접근할 수 있습니다.

프로젝트 성능을 최적화할 때, 상황에 맞는 알고리즘을 작성하여 리렌더링을 방지할 때는 false
값을 반환하게 합니다. 컴포넌트를 최적화하는 부분은 앞으로 리액트를 공부하면서 더 자세히 알 7
아보겠습니다.

7.2.6 getSnapshotBeforeUpdate 메서드 컴포넌트의 라이프사이클 메서드

이것은 리액트 v16.3 이후 만든 메서드입니다. 이 메서드는 render에서 만들어진 결과물이 브라
우저에 실제로 반영되기 직전에 호출됩니다. 이 메서드에서 반환하는 값은 componentDidUpdate에
서 세 번째 파라미터인 snapshot 값으로 전달받을 수 있는데요. 주로 업데이트하기 직전의 값을
참고할 일이 있을 때 활용됩니다(예: 스크롤바 위치 유지).

getSnapshotBeforeUpdate(prevProps, prevState) {
if(prevState.array != = this.state.array) {
const { scrollTop, scrollHeight } = this.list
return { scrollTop, scrollHeight };
}
}

7.2.7 componentDidUpdate 메서드

componentDidUpdate(prevProps, prevState, snapshot) { ... }

이것은 리렌더링을 완료한 후 실행합니다. 업데이트가 끝난 직후이므로, DOM 관련 처리를 해도
무방합니다. 여기서는 prevProps 또는 prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에

접근할 수 있습니다. 또 getSnapshotBeforeUpdate에서 반환한 값이 있다면 여기서 snapshot 값을
전달받을 수 있습니다.

177

리액트를 다루는 기술_개정판(본문)최종출력용.indb 177 2019-08-20 오전 11:03:03