HOC(High-Order Component, 고차 컴포넌트)란 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수를 말합니다. 함수형 프로그래밍의 고차 함수(higher-order function) 개념을 React 컴포넌트에 적용한 패턴이죠.

---

1. HOC의 형태

// HOC 정의: WrappedComponent를 인자로 받아 EnhancedComponent를 반환
function withSomething(WrappedComponent) {
  return function EnhancedComponent(props) {
    // 추가 로직 (예: props 주입, 상태 관리 등)
    return <WrappedComponent {...props} extra="value" />;
  };
}

• 입력: 원본(기본) 컴포넌트(WrappedComponent)

• 출력: 기능이 확장된 새로운 컴포넌트(EnhancedComponent)

---

2. 사용 예제

(1) 로딩 처리 HOC

// src/hocs/withLoading.js
import React from 'react';

export function withLoading(WrappedComponent) {
  return function LoadingComponent({ isLoading, ...props }) {
    if (isLoading) {
      return <div>로딩 중…</div>;
    }
    return <WrappedComponent {...props} />;
  };
}

// 사용
import { withLoading } from './hocs/withLoading';
import UserList from './UserList';

const UserListWithLoading = withLoading(UserList);

// <UserListWithLoading isLoading={true} />  
// → "로딩 중…" 표시

(2) 권한 검증 HOC

// src/hocs/withAuth.js
import React from 'react';
import { useUser } from '../hooks/useUser';

export function withAuth(WrappedComponent) {
  return function AuthComponent(props) {
    const { user, loading } = useUser();
    if (loading) return <div>…</div>;
    if (!user) return <Navigate to="/login" />;
    return <WrappedComponent {...props} />;
  };
}

// 사용
import { withAuth } from './hocs/withAuth';
import Dashboard from './Dashboard';

export default withAuth(Dashboard);

---

3. HOC의 장점

• 코드 재사용성

  여러 컴포넌트에 공통 로직(로딩, 권한 검사 등)을 깔끔하게 묶어서 적용 가능

• 관심사 분리(Separation of Concerns)

  UI(표시 로직)과 비즈니스 로직(데이터 패칭, 인증 등)을 분리

---

4. 주의할 점

1. Props 이름 충돌

   HOC에서 주입하는 props 이름이 WrappedComponent 기존 props와 겹치지 않도록 주의

2. ref 전달 문제

   기본 HOC는 ref를 전달하지 못합니다. ref 전달이 필요하면 React.forwardRef를 함께 사용해야 합니다.

3. 디버깅 어려움

   React DevTools에서 컴포넌트 트리가 복잡해지고, 이름이 EnhancedComponent처럼 일반적이라 파악이 어려울 수 있습니다.

   • 이럴 때는 HOC 반환 컴포넌트에 displayName을 지정해 주세요.

     
     

EnhancedComponent.displayName = `withLoading(${getDisplayName(WrappedComponent)})`;

---

5. HOC 대신 고려할 수 있는 패턴

• Custom Hooks (useSomething)

  함수 내부에서 로직을 재사용하고, 컴포넌트 레벨에서 훅을 호출해 상태/효과를 주입

  
  

• Render Props

  컴포넌트에 함수를 props로 넘겨 UI를 렌더링하는 방식

  
  

훅이 도입된 이후로는 HOC보다 Custom Hook을 선호하는 경우가 많습니다. 하지만 특정 상황에선 여전히 HOC가 유용할 수 있어요.

---

결론

• HOC는 React 컴포넌트를 감싸서(랩핑) 공통 기능을 추가하는 고차 함수 패턴

• Custom Hook과 함께 비교해 보고, 상황에 맞춰 선택하세요!