Model.Unit.tsx

Unit 파일은 model item 하나 또는 list/table 표현 하나를 렌더링하는 재사용 renderer를 담습니다. 흔한 export는 card, compact row, avatar, gallery tile, column helper입니다.

Unit은 보통 presentational component입니다. edit button 같은 얇은 UI action은 포함할 수 있지만 form은 Template에, 더 큰 interaction은 Util 또는 Store에 둡니다.

ModelProps와 Light model

ModelProps로 model prop, href, className, 공통 interaction prop을 type 처리합니다. Unit component는 list에서 반복 렌더링되므로 보통 Light model을 받습니다.

Article.Unit.tsx

Unit variant

하나의 Unit 파일은 같은 model에 대한 여러 display shape를 export할 수 있습니다. 일반 card는 Card, compact row는 Mini, feed/list summary는 Abstract, image grid는 Gallery처럼 용도에 맞게 이름 붙입니다.

Unit은 기본적으로 server component이므로 onClick 같은 browser event를 Unit에 직접 두는 것을 권장하지 않습니다. interactive 기능은 Article.Util.Remove 같은 작은 Util component로 분리한 뒤 Unit에서 조합합니다.

Article.Unit.tsx

Unit 안의 action

Unit은 remove, copy, detail button 같은 작은 UI action을 보여줄 수 있습니다. Unit은 얇게 유지하고 browser 동작은 작은 Util component로 렌더링하며, form과 async workflow는 Unit 밖에 둡니다.

Article.Unit.tsx

Load.Units와 직접 렌더링

slice가 loading, pagination, refresh, empty state를 관리해야 하면 Load.Units를 사용합니다. page가 이미 배열을 가지고 있다면 map으로 Unit을 직접 렌더링하며, server-rendered page에서 자주 쓰입니다.

Load.Units는 slice state를 client store에 hydrate해서 첫 렌더링 이후에도 generated pagination, query, sort, refresh, insight helper가 계속 동작할 수 있게 합니다.

field	설명	예제
<model>List<Suffix>	Load.Units가 hydrate한 list입니다. 현재 화면에 보이는 list state입니다.
<model>InitList<Suffix>	server init object에서 받은 최초 list snapshot입니다. reset이나 비교 흐름에 사용할 수 있습니다.
<model>InitAt<Suffix>	server가 list를 initialize한 시각입니다.
<model>ListLoading<Suffix>	hydration 이후 list가 준비되었음을 표시합니다.
<model>Insight<Suffix>	slice와 함께 반환된 insight data입니다. count나 summary 값을 담습니다.
st.pageOf<Model><Suffix> / st.lastPageOf<Model><Suffix> / st.limitOf<Model><Suffix>	init object에서 hydrate되는 pagination state입니다.
st.queryArgsOf<Model><Suffix>	slice를 load할 때 사용한 현재 query argument입니다.
st.sortOf<Model><Suffix>	slice를 load할 때 사용한 현재 sort 값입니다.

Load.Units가 hydrate한 list입니다. 현재 화면에 보이는 list state입니다.

<model>InitList<Suffix>

server init object에서 받은 최초 list snapshot입니다. reset이나 비교 흐름에 사용할 수 있습니다.

<model>InitAt<Suffix>

server가 list를 initialize한 시각입니다.

<model>ListLoading<Suffix>

hydration 이후 list가 준비되었음을 표시합니다.

<model>Insight<Suffix>

slice와 함께 반환된 insight data입니다. count나 summary 값을 담습니다.

st.pageOf<Model><Suffix> / st.lastPageOf<Model><Suffix> / st.limitOf<Model><Suffix>

init object에서 hydrate되는 pagination state입니다.

st.queryArgsOf<Model><Suffix>

slice를 load할 때 사용한 현재 query argument입니다.

st.sortOf<Model><Suffix>

slice를 load할 때 사용한 현재 sort 값입니다.

Load.Units

Direct SSR rendering

실전 규칙

list와 반복 Unit 렌더링에는 Light model을 사용합니다.

여러 layout이나 link에서 재사용될 수 있는 Unit은 className과 href를 받습니다.

호출하는 쪽의 style과 Unit의 기본 style을 합칠 때 clsx를 사용합니다.

클릭 가능한 card/list container에는 Layout.Unit 또는 Link를 우선 사용합니다.

form은 Template에, 복잡한 async interaction은 Util 또는 Store에 둡니다.

하나의 Card에 많은 flag를 추가하기보다 display 목적별 variant를 export합니다.

Model.Unit.tsx

ModelProps와 Light model

field

설명

예제

Load.Units가 hydrate한 list입니다. 현재 화면에 보이는 list state입니다.

<model>InitList<Suffix>

server init object에서 받은 최초 list snapshot입니다. reset이나 비교 흐름에 사용할 수 있습니다.

<model>InitAt<Suffix>

server가 list를 initialize한 시각입니다.

<model>ListLoading<Suffix>

hydration 이후 list가 준비되었음을 표시합니다.

<model>Insight<Suffix>

slice와 함께 반환된 insight data입니다. count나 summary 값을 담습니다.

st.pageOf<Model><Suffix> / st.lastPageOf<Model><Suffix> / st.limitOf<Model><Suffix>

init object에서 hydrate되는 pagination state입니다.

st.queryArgsOf<Model><Suffix>

slice를 load할 때 사용한 현재 query argument입니다.

st.sortOf<Model><Suffix>

slice를 load할 때 사용한 현재 sort 값입니다.