class형 컴포넌트 - shouldComponentUpdate( )

shouldComponentUpdate 라이프 사이클 메서드
렌더링시 state, props의 변경이 있는 경우에만 렌더링 될 수 있도록하는 최적화에 유용한 메서드이다.

 

  아래의 코드를 보면 click버튼이 있는 하나의 테스트용 컴포넌트이다. click 이벤트를 넣어줬지만 click을 여러번 누르더라도 계속해서 동일하게 빈 객체로 setState하기 때문에 state는 변경되지 않는다.  즉 여러번의 click에도 state는 바뀌는 것이 없다. 리액트의 핵심은 '상태가 변화하면 새롭게 그린다!' 라고 볼 수 있다. 리액트에서 리렌더링이 발생하는 이유는 크게 3가지 이다. state가 변하거나, props가 변하거나, 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 같이 리렌더링되는 경우 3가지 이다. 그렇다면 상태가 변하지 않은 경우에는 렌더링 되지 않는게 정상이다.(props와 부모-자식 컴포넌트의 관계는 지금은 제외하고 설명하겠다.) 다음 아래 코드를 살펴보자

import React, { Component } from "react";

class Test extends Component {
  state = {
    counter: 0,
  };

  onClick = () => {
    this.setState({});
  };

  render() {
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}

export default Test;

  위의 사진처럼 React Developer Tools의 설정을 눌러보자.(톱니바퀴 모양) Highlight updates when components render라는 옵션이 있고 이것을 선택해보면 렌더링이 될 때 마다 하이라이트 처리를 해주는 기능이 제공된다. 이제 렌더링된 button을 계속해서 클릭해 보자! 

 

 

 

  클릭해보면 위의 영상과 같이 state가 변경되지 않았음에도 계속해서 렌더링되는 것을 확인할 수 있다. 다시 말해 클릭 이벤트가 발생하고 setState가 호출이 되었다는 이유만으로 state의 변경이 없음에도 다시 렌더링 된 것이다.

 

이러한 이유는 무엇일까? 그 이유는 바로 React.Component에서 찾을 수 있다. React.Component는 shouldComponentUpdate를 따로 설정해주지 않은 경우, 항상 true를 반환한다. 즉, setState가 실행되면 state, props의 변경 여부를 신경쓰지 않고 무조건적으로 컴포넌트를 업데이트시킨다는 것이다.

 

이는 매우 비효율적이다. 그렇다면 이를 최적화는 방법은 무엇이 있을까? 바로 처음에 언급한 shouldComponentUpdate() 메서드를 통해 설정해주는 것이다. shouldComponentUpdate()는 렌더링 직전에 실행된다. state와 변경될 state를 비교하여 변화가 있는 경우에는 true를 반환하여 리렌더링 되도록 만들고, 그렇지 않은 경우에는 false를 반환하여 리렌더링되지 않게 만들어 준다. 이를 통해 해당 다시 최적화 해보자.

 

import React, { Component } from "react";

class Test extends Component {
  state = {
    counter: 0,
  };

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

  onClick = () => {
    this.setState({});
  };

  render() {
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}

export default Test;

다시 버튼을 클릭해 보겠다.

 

 

 

  하이라이트 표시가 나타나지 않는다. 즉 다시 렌더링이 되고 있지 않다는 뜻이다. 물론 해당 컴포넌트의 state의 변화가 없는 경우에만 다시 렌더링되지 않는것이니 state가 변경되는 경우에는 다시 렌더링 될 것이다! 

 

지금까지 class형 컴포넌트의 경우 state의 변화가 있는 경우에만 렌더링될 수 있도록 만들어주는 메서드를 알아보았다!