리액트 shouldcomponentupdate

SCU(shouldcomponentupdate)

부제 : 그만 Render 시켜 !

---

연휴중 공부하다보니 새롭게 발견한
shouldcomponentupdate라는 기능을 발견해 블로깅을 해보려 한다

shouldcomponentupdate 란 ?

shouldcomponentupdate 즉 SCU를 알아보기 전에

리액트는 과연 언제 렌더링을 수행할까 ?

1. props가 변경 되었을때
2. state가 변경 되었을때
3. 부모 컴포넌트가 렌더링 되었을때

이렇게 크게 3가지로 구별 할 수 있으며 (3가지 말고도 더많다)

부모 컴포넌트에서 상태를 변경하였지만 그 영향을 받지 않는 자식 컴포넌트
또한 불필요한 렌더링을 수행하여 성능 손실이 발생하게 된다

이럴 때 사용하는 것이 바로 SCU라는 라이프사이클 메서드 이며

이 라이프사이클 메서드를 사용하게 되면 조건에 따라 데이터가 변경되어

영향을 받아 렌더링이 필요한 경우에만 렌더링 작업을 수행할 수 있다.

아래의 코드를 보자

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: this.state.counter + 1,
    };
  }

  handleClick = () => {
    this.setState({
      counter: this.state.counter + 1,
    });
  };

  render() {
    console.log("렌더테스트", this.state);
    return (
      <div>
        <button onClick={this.handleClick}>클릭</button>
      </div>
    );
  }
}

export default App;

버튼을 클릭할 때 마다 counter라는 state값이 1씩 증가하게 되어
render 창에 작성해놓은 console창이 출력이 될 것이다

하지만

  handleClick = () => {
    this.setState({
      // counter: this.state.counter + 1,
    });
  };

이 부분을 주석처리 한다면 setState는 호출했지만 바뀌지는 않아
굳이 render의 필요성이 없다 하지만 console창은 여전히 동작한다.

그럴때에는 SCU를 아래와 같이 사용한다.

  shouldComponentUpdate(newxProps, nextState, nextContext) {
    if (this.state.counter !== nextState.counter) {
      console.log("SCU는 true임");
      return true;
    }
    console.log("SCU는 false임");
    return false;
  }

기존의 counter 값과 새로 바뀐 nextState.counter 값이 다르게 되면
state 내용이 달라 졌으므로 ture가 return되어 렌더링이 된다
(false일 경우 렌더링이 되지 않는다)

위의 코드에서는 정말 간단한 예시를 들었지만
예를들어 화면에 고정되어 있는 게시판이 있고 기존의 작성되어있는
게시글 목록이 있을때 새롭게 게시글을 작성을 하였을때는
목록이 렌더가 되는것이 맞지만 그것이 아니라 영향을 주지 않는 다른 부분의
버튼을 눌렀을때 목록이 렌더가 되고 있다면 리팩토링 할 필요가 있다

물론 지금은 하나의 컴포넌트에서 굉장히 간단한 코드이지만 수많은 프로세스와
다양한 컴포넌트들이 얽혀있는 상황에서는 필요하지 않는 render는 성능 손실이 발생하게 되는 법이다 !

틀린 부분이 있다면 댓글로 부탁드리겠습니다 : )