React v16 lifecycle - Updating

이전 글 React v16 lifecycle - Mounting과 이어집니다. (꼭 봐야 할 필요가 있을 정도로 이어지지는 없음)

 

이번에는 React v16 lifecycle 에서 Updating에 대해 알아봅시다.

Updating 에는 5개의 lifecycle이 있습니다.

- static getDerivedStateFromProps() - 마찬가지로 다루지 않습니다.

- shouldComponentUpdate()

- render() - 이전 글에 포함되어 있습니다.

- getSnapshotBeforeUpdate()

- componentDidUpdate()

 

shouldComponentUpdate(nextProps, nextState)

매번 update 되기 전 실행됩니다. (단, forceUpdate, 첫 렌더 시에는 호출하지 않음)

return 값에 의해 render 여부를 결정합니다. (return 값이 true면 rendering 함)

기본적으로는 true를 반환하며 (기본적으로는 렌더링을 한다는 의미)

parameter 값으로 update 될 props와 state를 받습니다.

parameter를 이용하여 불필요한 렌더링을 방지할 수 있습니다. (React 부모 컴포넌트의 props가 같은 값으로 set 했을 시 자식 컴포넌트에서의 rendering에 대해서)

 

getSnapshotBeforeUpdate(prevProps, prevState)

DOM에 새로 그려진 값이 출력되기 전에 호출됩니다.

업데이트 되기 전의 props와 state 값을 paramter로 받고

return 하는 값은 componentDidUpdate의 3번째 paramter인 snapshot으로 들어가게 됩니다.

 

componentDidUpdate(prevProps, prevState, snapshot)

update가 된 후에 호출됩니다.

parameter로 update 되기 전 props, state를 받고 getSnapshotBeforeUpdate에서 return 한 snapshot을 받습니다.

최초 렌더 시에는 호출되지 않습니다.

prev 값과 update 된 값을 비교하여 request를 날릴지 말지 정하는 곳으로 사용하면 좋다고 합니다.

ex) 검색 값 변경 시 같은 값으로 변경하면 검색 요청 안하는 그런 경우??

 

코드로 보는 예제는 이렇습니다.

import React from 'react'
import ChildComponent from './components/ChildComponent'

class App extends React.Component {
  constructor(props) {
    super(props)
    console.log('constructor')
    this.state = {
      a: 1
    }
  }

  render() {
    console.log('render')
    const { a } = this.state
    return (
      <div>
        React-16-lifecycle
        <p>
          a: {a}
        </p>
        <button onClick={() => {
          this.setState({
            a: a + 1
          })
        }}>
          Update Button
        </button>
      </div>
    )
  }

  componentDidMount() {
    console.log('componentDidMount')
  }

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    console.log('shouldComponentUpdate')
    console.log(nextProps, nextState, nextContext)
    return true
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate')
    console.log(prevProps, prevState)
    return "Hello i'm getSnapshotBeforeUpdate!"
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate')
    console.log(prevProps, prevState, snapshot)
  }
}

export default App

 

그럼 실제 실행 시 어떻게 작동하는지 봅시다.

고양이는 귀엽다.

저번에 했던 Mounting lifecycle이 처음 콘솔에 찍히게 되고 a 값을 증가시키는 버튼을 클릭 시 updating 관련 lifecycle이 돌기 시작합니다.

동영상 마지막에 콘솔 로그를 다 지우고 버튼을 누르는 경우를 보면

누르자마자 shouldComponentUpdate 가 찍히고 변경될 state, props 값이 나옵니다.

그다음 shouldComponentUpdate에서 return true를 하였기 때문에 render가 실행되고 render 후 getSnapshotBeforeUpdate가 실행되며 이전 state와 props를 찍습니다.

getSnapshotBeforeUpdate에서는 "Hello i'm getSnapshotBeforeUpdate!" 를 return 하고 componentDidUpdate에서는 이전 state와 props, 그리고 getSnapshotBeforeUpdate에서 return 한 snapshot을 받게 됩니다.

 

관련 예제 코드 링크