Higher-Order Component Pattern - withLoading

어떤 컴포넌트든 받아서 로딩 처리를 자동으로 더해 주는 HOC withLoading 을 구현하세요. 결과 컴포넌트는 추가로 loading 이라는 prop 을 받고, 그 값이 true 면 "Loading..." 를 보여주며 원래 컴포넌트는 렌더하지 않습니다.

시그니처

function withLoading<P extends object>(
  Component: React.ComponentType<P>
): React.ComponentType<P & { loading: boolean }>;

동작

• loading === true 이면 <span role="status">Loading...</span> 만 렌더
• loading === false 이면 Component 에 나머지 props 를 그대로 전달해 렌더
• loading 자체는 wrapped 컴포넌트에 전달하지 않아도 무방 (전달해도 무해해야 함)

사용 예시

function Greeting({ name }: { name: string }) {
  return <div data-testid="hi">Hi, {name}</div>;
}

const LoadingGreeting = withLoading(Greeting);

<LoadingGreeting name="Alice" loading={true} />;  // "Loading..."
<LoadingGreeting name="Alice" loading={false} />; // "Hi, Alice"

학습 포인트

• HOC = 컴포넌트를 받아 컴포넌트를 돌려주는 함수
• TypeScript 제네릭 <P extends object> 로 원본 props 보존
• 단일 책임: HOC 는 로딩 분기만, 화면은 원본 컴포넌트가 담당
• 같은 동작을 여러 컴포넌트에 일관되게 적용