React의 Pure Component란?

안녕하세요! 오늘은 React에서 성능 최적화를 위해 자주 사용되는 Pure Component에 대해 알아보겠습니다. Pure Component는 특정 조건에서 컴포넌트의 리렌더링을 최적화할 수 있는 중요한 도구입니다.

Pure Component란?

1. Pure Component 정의

Pure Component는 클래스형 컴포넌트에서 성능 최적화를 위해 사용되는 React 컴포넌트입니다. Pure Component는 shouldComponentUpdate 메서드를 자동으로 구현하여, props나 state가 변경되지 않으면 컴포넌트를 리렌더링하지 않습니다.

예제

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
    render() {
        console.log('Component rendered');
        return <div>{this.props.value}</div>;
    }
}

export default MyComponent;

위 예제에서 MyComponent는 PureComponent를 상속받아 생성되었습니다. props나 state가 변경되지 않으면 컴포넌트는 리렌더링되지 않습니다.

2. Pure Component의 특징

2.1 얕은 비교 (Shallow Comparison)

Pure Component는 shouldComponentUpdate 메서드에서 얕은 비교를 사용하여 props와 state를 비교합니다. 즉, 객체나 배열의 내부 요소를 비교하지 않고, 참조 값만 비교합니다.

2.2 성능 최적화

Pure Component는 불필요한 리렌더링을 방지하여 성능을 최적화할 수 있습니다. 특히, 컴포넌트 트리가 깊거나, 리렌더링 비용이 높은 경우에 유용합니다.

3. Pure Component 사용 시 주의사항

3.1 불변성 유지

Pure Component는 얕은 비교를 사용하므로, 불변성을 유지하는 것이 중요합니다. 객체나 배열을 직접 수정하지 말고, 새로운 객체나 배열을 생성하여 상태를 업데이트해야 합니다.

// 잘못된 예시
this.setState(prevState => {
    prevState.items.push(newItem);
    return { items: prevState.items };
});

// 올바른 예시
this.setState(prevState => ({
    items: [...prevState.items, newItem]
}));

3.2 복잡한 데이터 구조

복잡한 데이터 구조를 사용할 때는 얕은 비교가 한계가 있을 수 있습니다. 이 경우, shouldComponentUpdate 메서드를 직접 구현하거나, React.memo를 사용하는 것이 좋습니다.

4. 함수형 컴포넌트와 React.memo

함수형 컴포넌트에서는 PureComponent 대신 React.memo를 사용할 수 있습니다. React.memo는 고차 컴포넌트로, 전달된 props가 변경되지 않으면 컴포넌트를 리렌더링하지 않습니다.

예제

import React from 'react';

const MyComponent = React.memo(({ value }) => {
    console.log('Component rendered');
    return <div>{value}</div>;
});

export default MyComponent;

위 예제에서 MyComponent는 React.memo를 사용하여 props가 변경되지 않으면 리렌더링되지 않습니다.

결론

Pure Component는 React에서 성능 최적화를 위해 사용되는 중요한 도구입니다. 얕은 비교를 사용하여 불필요한 리렌더링을 방지하며, 컴포넌트의 성능을 향상시킬 수 있습니다. 함수형 컴포넌트에서는 React.memo를 사용하여 동일한 효과를 얻을 수 있습니다. Pure Component와 React.memo를 적절히 활용하여 React 애플리케이션의 성능을 최적화해 보세요.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.