shouldComponentUpdate

 

 

Pure Component

React에서 PureComponent는 Component의 서브클래스로,

컴포넌트의 props와 state가 변경될 때 리렌더링을 결정하는 방식에 있어 Component와 다르다

PureComponent는 shouldComponentUpdate 생명주기 메소드를 자동으로 구현하고 있으며,

얕은 비교(shallow comparison)를 사용하여 props와 state의 변경을 검사한다

이는 컴포넌트의 성능 최적화를 돕는다

얕은 비교는 props와 state의 최상위 수준의 값만 비교하여,

이전 값과 새로운 값이 같은지 여부를 판단한다

객체나 배열과 같은 복잡한 구조에서는 내부 값이 변경되어도 최상위 참조가 같으면 변경사항을 감지하지 못할 수 있다

따라서, PureComponent를 사용할 때는 불변성(Immutability)을 유지하는 것이 중요하다

 

shouldComponentUpdate

shouldComponentUpdate는 React 컴포넌트의 생명주기 메소드 중 하나로,

컴포넌트가 리렌더링을 해야 할지 말아야 할지 결정한다

이 메소드는 기본적으로 true를 반환하며,

이는 React가 props나 state가 변경될 때마다 리렌더링을 수행하도록 지시한다

shouldComponentUpdate 메소드를 커스텀 구현하여 특정 조건에서만 리렌더링을 허용함으로써 성능을 최적화할 수 있다

shouldComponentUpdate(nextProps, nextState) {
  // 여기에 로직을 추가하여 특정 조건에서만 true를 반환
  return nextProps.id !== this.props.id;
}

 

PureComponent와 shouldComponentUpdate는 둘 다 컴포넌트의 리렌더링 성능을 최적화하는 데 사용되지만,

사용 방식이 다르다

PureComponent는 자동으로 얕은 비교를 수행하는 반면,

shouldComponentUpdate는 개발자가 직접 리렌더링 조건을 정의할 수 있게 해준다

따라서, 애플리케이션의 특정 요구 사항에 따라 적절한 방법을 선택하여 사용할 수 있다