React.PureComponent란?

React.Component와는 React 메소드중 하나인 shouldComponentUpdate를 다루는 방식이 다르다.

React.PureComponent는 shouldComponentUpdate가 이미 구현되어 있고,

props와 state를 얕은 비교를 한 뒤 변경된 것이 있는경우만 리렌더링한다.

즉, PureComponent는 성능을 향상시키는데 중요한 것인 ShouldComponentUpdate를 신경쓰지 않아도 된다.

 

밑의 코드는 사용자가 버튼을 클릭하면 카운터가 랜덤하게 증가하는 컴포넌트다.

import React, { PureComponent } from 'react';
import { render } from 'react-dom';

const root = document.querySelector('#root');
const pTag = document.createElement('p');

const logClosure = () => {
  let clickedCount = 0;
  let reRenderedCount = -1;

  return (isReRendered) => {
    if (isReRendered) {
      reRenderedCount += 1;
    } else {
      clickedCount += 1;
    }

    pTag.textContent = `log -> click count : ${clickedCount} | re-render count : ${reRenderedCount}`;
  };
};

const log = logClosure();

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    root.after(pTag);
  }

  handleClick() {
    log(false);

    if (Math.floor(Math.random() * 10) % 2) {
      this.setState({
        counter: this.state.counter + 1,
      });
    } else {
      this.setState({
        counter: this.state.counter,
      });
    }
  }

  render() {
    log(true);

    return (
      <div>
        {this.state.counter}
        <br />
        <input
          type="button"
          onClick={this.handleClick}
          value="click"
        />
      </div>
    );
  }
}

render(<App />, root);

PureComponent를 사용하면 카운트가 증가할 때만 re-render 하지만

Component를 사용하면 setState가 실행되어, 매 클릭마다 re-render 한다.

 

this.state.counter는 0부터 10까지의 랜덤한 값을 받아 그게 2로 나눠지는 수 ( 짝수 )

인 경우에만 counter가 1씩 늘어나게되는데

 

이 counter에 변화가 생긴경우에만 re-render가 되는게 PureComponent다