1️⃣ 과거의 설계 패러다임: Container-Presenter 패턴

• 상위 컴포넌트(Container)가 데이터를 모두 fetch
• 하위 컴포넌트(Presenter)는 순수 UI 담당
• 데이터 흐름: fetch → setState → props 전달
• 관심사 분리를 컴포넌트 계층으로 구현

const Container = () => {
  const a = useFetchA();
  const b = useFetchB();
  return <Presenter a={a} b={b} />;
};

2️⃣ 현재의 설계 패러다임: Suspense + 훅 + 기능 기반 분리

• 컴포넌트가 직접 useQuery로 데이터 fetch
• Suspense로 로딩/타이밍 처리
• 훅으로 로직 분리, UI는 View 컴포넌트
• 관심사 분리를 계층이 아닌 역할 기준(feature-based) 으로 구현

<Suspense fallback={<Loading />}>
  <UserProfileContainer />
</Suspense>

✅ 현대 설계의 기본 구조

📦 디렉터리 구조 예시 (Feature-first)

features/
└── user/
    ├── hooks/useUserProfile.ts
    ├── apis/fetchUserProfile.ts
    └── components/
        ├── UserProfileContainer.tsx
        └── UserProfileView.tsx