React shouldComponentUpdate vs PureComponent

 

shouldComponentUpdate  

 

- 컴포넌트가 업데이트 되는 시점에 호출되는 메서드

- 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드

 

 

기본형태

shouldComponentUpdate(nextProps, nextState) { 
    if(조건) {
      return true;
    }
      return false;
};

- 리렌더링 할 조건을 작성한다

- true를 리턴하면 리렌더링하고, false를 리턴하면 리렌더링하지 않는다.

 

예시

import React, {Component} from 'react';

class Counter extends Component {
    state = {
        number: 0
    };

    shouldComponentUpdate(nextProps, nextState) { 
        if(this.state.number !== nextState.number) {
          return true;
        }
        return false;
    };
    
    onClick = () => {
        this.setState((prevState) => {
            return {number: prevState.number + 1}
        });
    };

  render() {
    return (
      <>
      <button onClick={this.onClick}>click</button>
      <h1>{this.state.number}</h1>
      </>
    );
  }
}

export default Counter;

 

    shouldComponentUpdate(nextProps, nextState) { 
        if(this.state.number !== nextState.number) {
          return true;
        }
        return false;
    };

 

: number 값이 이전과 현재가 다르면 true를 리턴하여 리렌더링한다.

 

 

PureComponent

 

- state가 변하면 알아서 감지하여 리렌더링을 해준다.

 

 

기본형태

import React, {PureComponent} from 'react';

class Counter extends PureComponent {

//코드생략

- Component자리에 PureComponent를 넣는다.

 

예시

import React, {PureComponent} from 'react';

class Counter extends PureComponent {
    state = {
        number: 0
    };
    
    onClick = () => {
        this.setState((prevState) => {
            return {number: prevState.number + 1}
        });
    };

  render() {
    return (
      <>
      <button onClick={this.onClick}>click</button>
      <h1>{this.state.number}</h1>
      </>
    );
  }
}

export default Counter;

 

: number 값이 변하면 알아서 감지하여 리렌더링 한다.