PureComponent

Pure Component

React.PureComponent는 React.Component와 매우 비슷하다.
한가지 다른 점이라면 react의 생명주기 메서드중 하나인 ShouldComponentUpdate가 이미 구현되어 있다는 점이다.

shouldComponentUpdate()
shouldComponentUpdate()는 props 또는 state가 새로운 값이 들어와 갱신되어 렌더링이 발생하기 직전에 호출된다.

기본적으로 shouldComponentUpdate() 메서드의 return값은 true이다.
false를 반환할 경우 render()와 componentDidUpdate()는 호출되지 않아 렌더링이 일어나지 않는다.

이제 예제를 통해 pureComponent와 Component의 차이점을 직접 봐보자.

component

React.Component는 shouldComponentUpdate를 따로 설정하지 않은 경우, 항상 ture를 반환한다.
한마디로 setState가 실행되면 state와 props의 변경 여부를 보지 않고 무조건적으로 컴포넌트를 업데이트한다는 것이다.

import React, { Component } from 'react';

class BlahBlah extends Component {
  state = {
    count: 0
  }
  counter () {
    this.setState({
      count: this.state.count 
    })
  }
  componentDidUpdate () {
    console.log(this.state.count); // 컴포넌트가 업데이트되면 값을 출력시킨다.
  }
  render () {
    return (
      <div> 
        { this.state.count }
        <button onClick={this.counter.bind(this)}>counterButton</button>
      </div>
    )
  }
}

export default BlahBlah;

pureComponent

pureComponent에는 이미 shouldComponentUpdate가 이미 구현되어 있는데, props와state를 얕은 비교를 통해 비교해 변경점이 있다면 ture를 return해서 리렌더링 하고, 변경점이 없다면 false를 return한다.

얕은비교란?

• 변수와 문자열은 값을 비교한다.
• object에서는 reference값을 비교한다.

이렇게 PureComponent는 현재 props,state와 바뀔 props,state를 비교해 업데이트 여부를 결정하게 된다. 이 때문에 아래의 코드에서 setState는 실행되었지만, count의 값이 바뀌지 않아 컴포넌트가 업데이트 되지 않는다.

import React, { PureComponent } from 'react';

class BlahBlah extends PureComponent {
  state = {
    count: 0
  }
  counter () {
    this.setState({
      count: this.state.count // 주목! 값이 변경되지는 않으나, setState는 써줌!!
    })
  }
  componentDidUpdate () {
    console.log(this.state.count); // 컴포넌트가 업데이트되면 값을 출력시킨다.
  }
  render () {
    return (
      <div> 
        { this.state.count }
        <button onClick={this.counter.bind(this)}>counterButton</button>
      </div>
    )
  }
}

export default BlahBlah;

마지막으로 간단하게 예제를 하나 더 봐보자

이 코드는 버튼을 클릭했을 때 랜덤으로 count를 올리는 함수를 PureComponent를 상속해 만든 코드이다. PureComponent의 얕은 비교를 통해 버튼을 누를 때 클릭이벤트는 매번 누적이 되지만, count가 변경되었을 때만 진행되고있다!

마무리

shouldComponentUpdate()를 통해 불필요한 redering을 줄일 수 있기 때문에 어플리케이션 성능을 향상시키기 위해 사용하기 좋을 것 같다.

참고사이트
https://velog.io/@dolarge/Pure-Component%EB%9E%80
https://wonism.github.io/react-pure-component/