[React]class에서 성능향상(shouldComponentUpdate, PureComponent)

const React = require('react');

class Test extends React.Component {
  state = {
    counter: 0
  }
  
  onClick = () => {
    this.setState({})
  }
  render() {
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    )
  }
}

module.exports = Test;

위의 코드를 실행한 결과이다. 버튼을 누를 때마다 불필요하게 렌더링이 되어버린다.

해결방법1. shouldComponentUpdate

const React = require('react');

class Test extends React.Component {
  state = {
    counter: 0
  }
  shouldComponentUpdate(nextProps, nextState, nextContext) {
    if (this.state.counter !== nextState.counter) {
      return true
    }
    return false
  }
  onClick = () => {
    this.setState({})
  }
  render() {
    console.log('렌더링')
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    )
  }
}
module.exports = Test;

위의 방법이 귀찮다면 아래의 PureComponent를 활용하는 것을 추천한다.

 

해결방법 2. PureComponent

const React = require('react');

class Test extends React.PureComponent {
  state = {
    counter: 0
  }
  onClick = () => {
    this.setState({})
  }
  render() {
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    )
  }
}
module.exports = Test;

PureComponent는 state가 바뀌었는지 아닌지를 보고 판단한다.

하지만, PureComponent의 단점은 객체나 배열과 같은 참조관계가 있는 구조일때는 바뀐것인지 아닌지 판단하기 힘들다.