model.Zone.tsx

Zone 컴포넌트는 Page와 UI Unit 사이를 연결하는 '비즈니스 컴포넌트'입니다. UI의 특정 섹션에 대한 데이터 페칭, 상태 관리, 비즈니스 로직을 처리합니다.

🏗️페이지 구성

Page는 이상적으로 Layout과 Zone 컴포넌트만으로 구성되어야 합니다. 상세한 UI 렌더링은 Unit이나 View에 위임합니다.

파일 규칙

Zone 파일은 해당 모델의 라이브러리 디렉토리에 위치합니다. 파일 이름은 파스칼 케이스(PascalCase) 규칙을 따릅니다.

lib/[model]/[Model].Zone.tsx

Zone 컴포넌트는 보통 Load.View나 Load.Units를 사용하여 비동기 데이터 로딩을 처리합니다. 전역 상태를 위해 Store와, 액션을 위해 Service와 상호 작용합니다.

Props

field설명

className?: string

Allows parent components to style the zone.

init?: ClientInit<Model, M>

Initial data for List/Units loading.

view?: ClientView<Model, M>

Initial data for View/Single loading.

예제 코드: List Zone

Product.Zone.tsx (List)

예제 코드: View Zone

Product.Zone.tsx (View)

1️⃣페이지를 얇게 유지

데이터 로딩과 로직을 Page 파일에서 Zone 파일로 옮기세요. Page는 주로 레이아웃 구성과 라우팅 파라미터에 집중해야 합니다.

2️⃣로딩 및 공백 상태 처리

Load.Units나 Load.View를 사용하여 Zone 내에서 로딩 및 공백 상태를 우아하게 처리하여 더 나은 사용자 경험을 제공하세요.

3️⃣비즈니스 로직 캡슐화

상호 작용 핸들러(예: Service 액션을 트리거하는 버튼 클릭)를 Zone 내부에 배치하여 Unit/View 컴포넌트를 순수하게 프레젠테이션용으로 유지하세요.