React에서 **Pure Components(순수 컴포넌트)**는 성능 최적화를 위해 shouldComponentUpdate() 라이프사이클 메서드를 자동으로 구현하는 특별한 유형의 클래스 컴포넌트입니다. Pure Component는 컴포넌트의 props와 state가 변경되지 않은 경우 불필요한 리렌더링을 방지하여 렌더링 효율성을 향상시킵니다.
Pure Component는 어떻게 작동하나요?
React의 Pure Component는 일반 클래스 컴포넌트와 유사하지만 한 가지 주요 차이가 있습니다. props와 state를 얕은 비교(shallow comparison)하여 컴포넌트를 리렌더링할지 여부를 결정합니다.
- props와 state가 변경되지 않은 경우(얕은 비교 결과 동일할 경우), 부모 컴포넌트가 리렌더링되더라도 해당 컴포넌트는 리렌더링되지 않습니다.
- props나 state에 변경 사항이 있는 경우, 예상대로 컴포넌트는 리렌더링됩니다.
Pure Component의 주요 특징
- 자동 최적화
Pure Component는 리렌더링 최적화를 자동으로 처리합니다. 일반 클래스 컴포넌트에서 shouldComponentUpdate 메서드를 수동으로 구현할 필요가 없습니다. - 얕은 비교(Shallow Comparison)
얕은 비교는 props와 state가 이전 값과 동일한지 확인합니다.- 원시 데이터 타입(숫자, 문자열 등): 실제 값 자체를 비교합니다.
- 복합 데이터 타입(객체, 배열 등): 참조(reference)가 동일한지 비교합니다. 객체나 배열의 내용이 아닌 참조만 확인하므로 데이터가 변경되었다면 새 참조로 간주됩니다.
- 성능 향상
불필요한 리렌더링을 방지함으로써, 특히 대규모 또는 복잡한 UI에서 애플리케이션 성능을 크게 향상시킬 수 있습니다.
Pure Component를 사용할 때
- 정적 또는 안정적인 데이터
props와 state가 자주 변경되지 않거나 예측 가능한 방식으로만 변경되는 경우 Pure Component가 이상적입니다. React는 불필요한 리렌더링을 건너뛸 수 있어 성능이 향상됩니다. - 클래스 컴포넌트에서 최적화가 필요할 때
함수형 컴포넌트에서는 React.memo를 사용하여 유사한 최적화를 구현할 수 있지만, 클래스 컴포넌트를 사용할 경우 Pure Component가 유용합니다.
예시
리스트 데이터를 props로 전달받는 컴포넌트를 가정해 보겠습니다. 리스트가 자주 변경되지 않는 경우, Pure Component를 사용하면 부모가 업데이트될 때마다 컴포넌트를 리렌더링하지 않고 리스트 데이터가 실제로 변경될 때만 리렌더링하도록 할 수 있습니다.
Pure Component는 불필요한 리렌더링을 방지하여 React 애플리케이션의 성능을 최적화하는 데 유용한 도구입니다. props와 state에 대해 얕은 비교를 자동으로 처리하므로, 데이터가 자주 변경되지 않거나 예측 가능한 경우 최적의 선택이 될 수 있습니다. 하지만, 컴포넌트가 복잡한 데이터 타입이나 자주 변경되는 props에 의존하는 경우에는 함수형 컴포넌트에서 React.memo를 사용하거나 성능 최적화를 수동으로 관리하는 대안을 고려하는 것이 좋습니다.