model.Zone.tsx

Zone 파일은 page의 client section component를 담습니다. Zone은 server에서 가져온 init/view data를 Load wrapper, Unit/View display component, Util action, 작은 section-level UI state와 조립합니다.

Page는 보통 route param과 server data를 Zone에 전달합니다. Zone은 section 조립을 담당하고, Unit/View는 display, Template은 form, Util은 작은 action, Store는 state/action을 담당합니다.

파일 규칙과 props

Zone 파일은 보통 client hook과 Load wrapper를 사용하므로 use client directive로 시작합니다. props로는 server에서 준비한 ClientInit 또는 ClientView 값을 자주 받습니다.

Path

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

Directive

"use client"

List props

className, init, slice, context ids

View props

className, view, self, context data

Load.Units list Zone

server page에서 ClientInit list data를 받은 Zone에는 Load.Units를 사용합니다. initial list state를 hydrate하고 loading/empty state를 처리하며 각 item 렌더링은 Unit component에 위임합니다.

DbBackup.Zone.tsx

renderItem

하나의 item을 렌더링하며 보통 Unit.Card 또는 Unit.Abstract에 위임합니다.

renderList

grouping, tab, board, custom ordering이 필요할 때 전체 list를 렌더링합니다.

renderEmpty

empty state를 렌더링하며 Model.NewWrapper 또는 link-style CTA와 함께 쓰는 경우가 많습니다.