PureComponent와 React.memo

유저들은 반응이 빠른 UI를 선호합니다. 최근 리액트로 개발을 하다보니 자식 컴포넌트가 필요 이상으로 계속해서 렌더링이 되는 경우가 생겼고, 이는 곧 성능 저하로 이어지기 때문에 개선이 필요하다는 생각이 들었습니다.

우선 React의 특성으로, React 앱은 state가 변화하거나 관련된 props가 변경되는 경우 전체적으로 렌더링이 됩니다. React는 먼저 컴포넌트를 렌더링 한 뒤, 이전 렌더링 결과와 비교하여 DOM 업데이트 결정 여부를 결정하게 되며 만약에 렌더링 결과가 이전과 다르다면 React는 DOM을 업데이트하게 됩니다.

리액트의 특성상 부모 컴포넌트가 다시 렌더링 되는 경우에는 자식 컴포넌트도 렌더링 되는 것이죠.

같은 내용이 업데이트 되었을 때 계속 그 내용을 불러와서 렌더링한다면 굉장히 불필요한 렌더링이 수행될 것입니다. 그러한 쓸데 없는 렌더링을 줄이는 방법으로 pureComponent나 React.memo가 사용되는데요. 해당 내용은 메모이제이션 기법의 이점을 얻고자 하는 경우에 사용하면 가장 좋습니다.

✔️ PureComponent

• React.PureComponent는 React.Component와 비교하여 생명주기 메소드 중 하나인 shouldComponentUpdate() 를 어떻게 쓰는지에 대한 부분에서 차이가 있습니다.
• shouldComponentUpdate() 는 state나 props가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출됩니다.
• 기본적으로 shouldComponentUpdate() 메소드의 return 값은 true 지만, false를 리턴하는 경우에는 render() 와 componentDidUpdate() 는 호출되지 않습니다.

import React, { PureComponent } from "react";

class Lime extends PureComponent {
  state = {
    count: 0,
  };
  counter() {
    this.setState({
      count: this.state.count, // 값이 변경되지는 않으나, setState는 작성한다
    });
  }
  componentDidUpdate() {
    console.log(this.state.count); // 컴포넌트가 업데이트되면 값을 출력한다.
  }
  render() {
    return (
      <div>
        {this.state.count}
        <button onClick={this.counter.bind(this)}>counterButton</button>
      </div>
    );
  }
}

export default Lime;

✔️ React.memo

• React.memo는 함수형 컴포넌트에서 PureComponent와 같은 기능을 수행합니다.
• 공식 문서를 확인해보면 pureComponent에는 shouldComponenetUpdate 함수가, React.memo에는 areEqual 함수가 구현되어 있어서 변화가 없을 때 다시 렌더링 하지 않는 것을 알 수 있습니다.

import React from 'react';

const Lime = () => {
  return (
   ...
  );
};

export default React.memo(Lime);

• React.memo 사용법은 매우 간단합니다. 위 처럼 감싸주기만 하면 됩니다 :)
• 기본 동작은 얕은 비교이며 깊은 비교의 경우에는 아래 사용 방법을 참고하시면 됩니다.

function areEqual(prevProps, nextProps) {
  /*
  nextProp가 prevProps와 동일한 값을 가지면 true를 반환하고, 그렇지 않다면 false를 반환
  */
}
export default React.memo(MyComponent, areEqual);

• [React공식문서] : areEqual 함수는 props들이 서로 같으면 true를 반환하고, props들이 서로 다르면 false를 반환합니다. 이것은 shouldComponentUpdate와 정반대의 동작입니다.

Today I Learned

React 성능 개선을 위해 사용되어지는 PureComponent & React.memo에 대해 알게 되었습니다.
state나 props의 데이터가 변경 되지 않는 경우, 컴포넌트를 업데이트 하지 않아도 된다면 PureComponent나 React.memo를 사용하여 불필요한 수행을 줄일 수 있습니다.

참고사이트

https://reactjs.org/docs/react-api.html#reactmemo
https://ui.toast.com/weekly-pick/ko_20190731

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)