Pure Component

리액트 애플리케이션을 개발할 때, 성능 최적화는 항상 고려해야 하는 중요한 주제 중 하나입니다. 특히 동일한 속성 및 상태에서 항상 동일한 결과를 렌더링하는 컴포넌트를 만들어 성능을 향상시키는 방법 중에 하나로 클래스형 컴포넌트 에서는 Pure Component, 함수형 컴포넌트 에서는 Memo가 있습니다.

Pure Component란?

shouldComponentUpdate 메서드를 구현하여, 컴포넌트의 프롭스와 상태(state)의 변경 여부를 자동으로 검사합니다. shouldComponentUpdate 메서드는 이전 프롭스와 현재 프롭스, 이전 상태와 현재 상태를 비교하고, 변경이 있을 때만 컴포넌트를 다시 렌더링합니다. 이를 통해 불필요한 렌더링을 방지하여 성능을 향상시킵니다.

클래스형 컴포넌트로 구현하기

클래스형 컴포넌트에서는 PureComponent를 상속 받아서 구현할 수 있습니다.

import React, { PureComponent } from 'react';

class PureExample extends PureComponent {
  render() {
    // 렌더링 로직
  }
}

함수형 컴포넌트로 구현하기

함수형 컴포넌트에서는 React.memo를 이용하여 부모로부터 전달된 props 값이 변경 되었을 경우를 감지하여 성능을 최적화 할 수 있습니다.

import React from 'react';

const MemoExample = React.memo((props) => {
  // 렌더링 로직
});

실습

클래스형 컴포넌트와 함수형 컴포넌트 두가지 버튼을 누르면 state값이 변경되게 만들었습니다. 값이 변경되지 않으면 렌더링 되지 않게 만들어보세요.