Pure Component

Pure Component는 React에서 제공하는 컴포넌트 중 하나로, 성능 최적화를 위해 사용되는 특별한 종류의 컴포넌트다. Pure Component는 클래스 컴포넌트로 작성되며, 일반적은 React 컴포넌트와 다르게 자동으로 얕은(shallow) 비교를 통해 리렌더링을 최적화한다.

주요 특징과 동작 원리

Pure Component의 주요 특징과 동작 원리는 다음과 같다.

• 얕은 비교(Shallow Comparison): Pure Component는 props와 state가 변경되었을 때 이전 값과 현재 값을 얕은 비교를 수행한다. 얕은 비교는 객체나 배열의 경우, 참조가 같은지만 확인하므로 객체 내부의 값이 변경되었더라도 리렌더링을 하지 않는다.

• 리렌더링 최적화: Pure Component를 사용하면 불필요한 리렌더링을 줄여 성능을 향상시킬 수 있다. 일반적인 컴포넌트에서는 부모 컴포넌트가 리렌더링되면 해당 컴포넌트도 리렌더링되지만, Pure Component는 props와 state가 변경되지 않으면 리렌더링을 하지 않는다.

• 주의 사항: 얕은 비교는 참조만 비교하기 때문에 객체나 배열이 중첩된 경우, 내부 값이 변경되더라도 해당 변경을 감지하지 못할 수 있다. 이 경우에는 내부 값이 변경될 때마다 새로운 객체나 배열을 생성하여 참조를 변경해주어야 한다.

• 순수 함수: Pure Component의 작동은 props와 state의 변경 여부만을 고려하므로, 컴포넌트 내부에서 side effect를 발생시키는 작업은 권장되지 않는다. 컴포넌트의 순수성을 유지하여 예측 가능한 동작을 유지해야 한다.

얕은 비교

얕은 비교는 객체나 배열 같은 복합 데이터 타입을 비교할 때, 해당 객체나 배열의 내용까지 깊게 비교하는 것이 아니라, 그들의 참조만을 비교하는 방식을 말한다. 얕은 비교는 두 객체나 배열이 동일한 메모리 위치(참조)를 가리키는지를 확인하는 것으로, 내부 값의 변경 여부까지 확인하지는 않는다.

객체와 배열은 자바스크립트에서 참조 타입에 해당하며, 변수나 상수에 저장되는 것은 실제 데이터가 아닌 메모리 주소(참조)다. 따라서 두 객체나 배열이 같은 메모리 위치를 가리키는 경우, 그들은 얕은 비교에서 같다고 판단된다.

예를 통해 이해해보자.

const array1 = [1, 2, 3];
const array2 = [1, 2, 3];
const array3 = array1;

console.log(array1 === array2); // false, 서로 다른 메모리 위치를 가리킴
console.log(arrat1 === array3); // true, 같은 메모리 위치를 가리킴

만약 두 배열의 내부 값까지 비교하려면 깊은 비교(deep comparison)를 수행해야 한다. 얕은 비교는 성능상의 이유로 복잡한 객체나 배열의 내부 값들을 일일이 비교하지 않고, 그들의 참조만을 비교한다. 때문에 객체나 배열의 내부 값이 변경되더라도 그들의 참조가 같으면 얕은 비교에서는 같다고 판단된다.

사용 예시

import React, { PureComponent } from 'react';

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

// MyComponent는 PureComponent로 선언되었으므로 props.value가 변경되지 않으면 리렌더링되지 않음

Pure Component의 사용은 성능 최적화를 위한 중요한 방법 중 하나이지만, 모든 컴포넌트에 적용하기보다는 실제로 리렌더링 성능 문제가 발생한 경우에 적절히 선택하여 사용하는 것이 좋다.