12. 컴포넌트 패턴과 최적화 - 1

고차 컴포넌트(Higher-Order Component) 패턴 소개

고차 컴포넌트(Higher-Order Component, HOC) 패턴은 React에서 컴포넌트 로직을 재사용하기 위한 강력한 패턴 중 하나입니다. 이번 글에서는 고차 컴포넌트의 개념과 활용 방법에 대해 알아보겠습니다.

고차 컴포넌트란?

고차 컴포넌트는 다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다. 이 패턴은 컴포넌트의 로직을 재사용하고 컴포넌트 간의 관심사를 분리하는 데 유용하게 활용됩니다.

고차 컴포넌트의 활용

import React from 'react';

// 고차 컴포넌트 생성 함수
function withLoadingIndicator(Component) {
  return function WithLoadingIndicator({ isLoading, ...props }) {
    if (isLoading) {
      return <div>Loading...</div>;
    }
    return <Component {...props} />;
  };
}

// 컴포넌트 정의
function MyComponent({ name }) {
  return <div>Hello, {name}!</div>;
}

// 고차 컴포넌트로 래핑
const MyComponentWithLoadingIndicator = withLoadingIndicator(MyComponent);

// 사용 예시
function App() {
  return (
    <div>
      <MyComponentWithLoadingIndicator name="World" isLoading={true} />
    </div>
  );
}

위의 코드에서 withLoadingIndicator 함수는 로딩 상태를 관리하는 로직을 가진 고차 컴포넌트를 생성합니다. 이렇게 생성된 고차 컴포넌트는 MyComponent 컴포넌트를 래핑하여 로딩 상태에 따라 다른 UI를 렌더링합니다.

장점

• 코드 재사용성: 공통 로직을 여러 컴포넌트에서 재사용할 수 있습니다.
• 관심사의 분리: UI 로직과 비즈니스 로직을 분리하여 컴포넌트를 더 간결하고 유지보수하기 쉽게 만듭니다.

주의할 점

• 고차 컴포넌트는 컴포넌트 계층 구조를 복잡하게 만들 수 있습니다. 너무 많은 고차 컴포넌트 사용은 코드 이해를 어렵게 할 수 있습니다.
• HOC 패턴보다는 컴포넌트 컴포지션과 Render Props, 혹은 Hooks와 같은 더 간단하고 유연한 패턴을 고려해보는 것이 좋습니다.

마무리

고차 컴포넌트 패턴은 React 애플리케이션에서 로직의 재사용성을 높이고 관심사를 분리하는 데 유용한 패턴입니다. 그러나 사용에 주의를 기울여야 하며, 필요한 경우 다른 패턴을 고려하는 것이 좋습니다.