HOC Pattern (withLoading)

#7StructuralMedium

HOC Pattern (withLoading)

Higher-Order Component

withLoading HOC를 구현하세요. 감싼 컴포넌트에 isLoading prop이 true면 <div>Loading...</div>을 렌더하고, 아니면 원래 컴포넌트를 나머지 props로 렌더합니다.

시그니처

export function withLoading<P extends object>(
  Component: ComponentType<P>
): ComponentType<P & { isLoading?: boolean }>;

사용 예시

const Hello = ({ name }: { name: string }) => <div>Hello {name}</div>;
const HelloWithLoading = withLoading(Hello);

<HelloWithLoading isLoading={true} name="world" />  // "Loading..."
<HelloWithLoading isLoading={false} name="world" /> // "Hello world"

학습 포인트

함수가 컴포넌트를 받아 새 컴포넌트를 반환 (HOC = 컴포넌트 합성기)
cross-cutting concern (로딩, 인증, 로깅)을 한 곳에서 처리
isLoading은 HOC가 가로채고 나머지 props만 wrap된 컴포넌트로 전달

import { ComponentType } from 'react';

export function withLoading<P extends object>(
  Component: ComponentType<P>
) {
  // TODO: 새 컴포넌트를 반환하세요.
  // - props에 isLoading: true가 오면 <div>Loading...</div> 렌더
  // - 아니면 isLoading을 빼고 나머지 props로 Component 렌더
  return function WithLoading(_props: P & { isLoading?: boolean }) {
    return null as any;
  };
}

Sandpack 로드 중…

import { ComponentType } from 'react';

export function withLoading<P extends object>(
  Component: ComponentType<P>
) {
  // TODO: 새 컴포넌트를 반환하세요.
  // - props에 isLoading: true가 오면 <div>Loading...</div> 렌더
  // - 아니면 isLoading을 빼고 나머지 props로 Component 렌더
  return function WithLoading(_props: P & { isLoading?: boolean }) {
    return null as any;
  };
}