14. 컴포넌트 패턴과 최적화 - 3

React.memo와 PureComponent를 활용한 성능 최적화

React 애플리케이션에서 성능 최적화는 항상 중요한 과제입니다. 이번 글에서는 React.memo와 PureComponent를 활용하여 성능을 향상시키는 방법에 대해 알아보겠습니다.

React.memo 소개

React.memo는 함수형 컴포넌트의 성능을 최적화하기 위한 Higher-Order Component입니다. 이를 사용하면 컴포넌트의 props가 변경되지 않으면 재렌더링을 방지할 수 있습니다.

import React from 'react';

const MyComponent = React.memo(({ value }) => {
  return <div>{value}</div>;
});

PureComponent 소개

PureComponent는 클래스형 컴포넌트의 성능을 최적화하기 위한 React의 내장 클래스입니다. PureComponent는 props와 state를 얕은 비교(shallow comparison)하여 변경 여부를 판단하고, 변경이 없으면 재렌더링을 방지합니다.

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

사용법 및 주의사항

React.memo와 PureComponent는 간단히 적용할 수 있지만 몇 가지 주의사항이 있습니다.

1. 객체나 배열과 같은 복합 데이터 타입의 경우, 얕은 비교로 인해 변경 여부를 정확히 판단할 수 없습니다. 이 경우에는 깊은 복사(deep copy)를 통해 문제를 해결할 수 있습니다.
2. 함수형 컴포넌트의 경우 React.memo를 사용하여 성능을 최적화할 수 있지만, 클래스형 컴포넌트의 경우 PureComponent를 사용해야 합니다.
3. PureComponent를 사용할 때에는 주의해야 할 점이 있습니다. PureComponent는 props와 state의 변경 여부를 얕은 비교로 판단하기 때문에, 객체나 배열과 같은 참조 타입의 경우 변경 여부를 정확히 감지하지 못할 수 있습니다.

코드 예제

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

export default MyComponent;

마무리

React.memo와 PureComponent는 React 애플리케이션의 성능을 향상시키는 데 유용한 도구입니다. 하지만 올바른 사용법과 주의사항을 숙지하여 적절히 활용해야 합니다. 성능 최적화는 애플리케이션의 사용자 경험을 향상시키는 데 중요한 요소이므로, 꼼꼼한 고려와 테스트가 필요합니다.