pure component

 

 

 

Pure Component는 React에서 제공하는 컴포넌트의 한 종류로,

컴포넌트의 리렌더링 성능을 향상시키기 위해 사용된다

클래스 컴포넌트와 함수형 컴포넌트 모두에 해당하는 개념으로,

클래스 컴포넌트에서는 React.PureComponent를 상속받아 사용하고,

함수형 컴포넌트에서는 React.memo를 사용하여 비슷한 효과를 낼 수 있다

 

클래스 컴포넌트에서의 Pure Component

React.PureComponent는 React.Component와 매우 비슷하지만, shouldComponentUpdate() 메소드를 자동으로 구현하여, props와 state가 변경되었을 때만 컴포넌트가 리렌더링되도록 한다

이 구현은 얕은 비교(shallow comparison)를 사용하여 현재 props와 state를 다음 props와 state와 비교한다

얕은 비교는 객체의 최상위 수준의 값만 비교하므로, 중첩된 객체에서 변경이 발생한 경우 감지하지 못할 수 있다

import React, { PureComponent } from 'react';

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

 

함수형 컴포넌트에서의 Pure Component

함수형 컴포넌트에서는 React.memo를 사용하여 컴포넌트를 감싸줌으로써 비슷한 효과를 낼 수 있다

React.memo는 컴포넌트에 전달된 props가 변경되었을 때만 컴포넌트가 리렌더링되도록 한다

이 역시 얕은 비교를 사용하여 props의 변경을 감지한다

import React, { memo } from 'react';

const MyPureComponent = memo(function MyComponent(props) {
  return <div>{props.name}</div>;
});

 

Pure Component의 사용 시 고려사항

• 성능 최적화:
  • Pure Component는 불필요한 리렌더링을 방지하여 성능을 향상시킬 수 있지만, 모든 경우에 사용해야 하는 것은 아니다
  • 얕은 비교가 적절하지 않은 경우나, 비교 자체가 리소스를 많이 사용하는 경우에는 오히려 성능에 부정적인 영향을 줄 수 있다
• 얕은 비교의 한계:
  • Pure Component는 얕은 비교를 사용하기 때문에, 객체나 배열과 같은 복잡한 구조에서 변경을 정확히 감지하지 못할 수 있다
  • 따라서, 이러한 경우에는 불변성을 유지하며 데이터를 업데이트하는 방식을 사용해야 한다

 

Pure Component를 적절히 사용하면,

애플리케이션의 성능을 향상시키고 더 효율적인 리렌더링을 달성할 수 있다