Model.Unit.tsx

Model.Unit.tsx 파일은 모델의 요약 뷰(주로 카드 또는 리스트 아이템)를 렌더링하는 프레젠테이션 컴포넌트입니다. 애플리케이션 전반에서 모델 인스턴스를 표시하는 표준 방법을 제공합니다.

파일 위치 및 명명 규칙

Unit 파일은 다른 모델 정의와 함께 위치합니다:

핵심 인터페이스: ModelProps

@akanjs/client 패키지는 통일된 Unit 컴포넌트 구현을 위한 제네릭 props를 제공합니다.

기본 사용 패턴

표준 카드 컴포넌트

가장 일반적인 export는 'Card'입니다. 네비게이션을 위한 'href'와 외부 스타일링을 위한 'className'을 허용해야 합니다.

고급 패턴

액션 및 상태 처리

Unit은 토글 버튼이나 상태 표시기와 같은 상호 작용 요소를 포함할 수 있습니다.

Load.Units와의 통합

Load.Units는 모델의 데이터 가져오기, 페이지 매김 및 목록 렌더링을 처리하는 @akanjs/ui의 강력한 유틸리티 컴포넌트입니다. Unit 컴포넌트 목록을 표시하는 주된 방법입니다.

주요 Props

옵션	타입	기본값	설명
init	ClientInit<T, L>	-	초기 데이터 소스 토큰입니다.
renderItem	(model, idx) => ReactNode	-	각 항목을 위한 렌더링 함수입니다.
renderList	(list) => ReactNode	-	renderItem의 대안입니다. 리스트 제어권을 가집니다.
renderEmpty	() => ReactNode	-	비어 있을 때 렌더링할 컴포넌트입니다.
pagination	boolean	true	페이지 매김 활성화 여부입니다.
filter	(item, idx) => boolean	-	클라이언트 측 필터 함수입니다.
sort	(a, b) => number	-	클라이언트 측 정렬 함수입니다.
className	string	-	컨테이너를 위한 클래스입니다.

init:ClientInit<T, L>:-

초기 데이터 소스 토큰입니다.

renderItem:(model, idx) => ReactNode:-

각 항목을 위한 렌더링 함수입니다.

renderList:(list) => ReactNode:-

renderItem의 대안입니다. 리스트 제어권을 가집니다.

renderEmpty:() => ReactNode:-

비어 있을 때 렌더링할 컴포넌트입니다.

pagination:boolean:true

페이지 매김 활성화 여부입니다.

filter:(item, idx) => boolean:-

클라이언트 측 필터 함수입니다.

sort:(a, b) => number:-

클라이언트 측 정렬 함수입니다.

className:string:-

컨테이너를 위한 클래스입니다.

실제 구현 예시

1. Zone 컴포넌트 내부

Zone 컴포넌트는 종종 스토어 슬라이스로 관리되는 UI의 전체 '섹션'을 제공하기 위해 Load.Units를 래핑합니다.

2. 직접 리스트 렌더링 (Load.Units 미사용)

정적 목록이나 데이터가 이미 배열로 사용 가능한 경우, 데이터를 map으로 순회하여 Unit 컴포넌트를 직접 렌더링합니다. 이 패턴은 데이터가 미리 가져와져 props로 전달되는 SSR(서버 사이드 렌더링)에서 클라이언트 측 로딩 상태를 방지하는 데 매우 효과적입니다.

모범 사례

🎨일관된 스타일링

외부 className props 병합에는 'clsx'를 사용하여 쉽게 재정의할 수 있도록 하세요.

🔗올바른 네비게이션

효율적인 라우팅을 보장하기 위해 내부 네비게이션에는 @akanjs/ui의 <Link>를 사용하세요.

⚡성능 우선

리스트 성능을 위해 'Light' 타입(cnst.LightModel)을 사용하세요. Unit에서 무거운 전체 모델을 로드하는 것을 피하세요.

🧩로직 분리

Unit 컴포넌트의 로직을 최소화하세요. 복잡한 상호 작용(예: 버튼)은 별도의 유틸리티 컴포넌트에 위임하세요.

♿접근성

접근성을 위해 표준 HTML 시맨틱(제목, 목록)을 준수하세요.

Model.Unit.tsx

파일 위치 및 명명 규칙

Unit 파일은 다른 모델 정의와 함께 위치합니다:

핵심 인터페이스: ModelProps

@akanjs/client 패키지는 통일된 Unit 컴포넌트 구현을 위한 제네릭 props를 제공합니다.

기본 사용 패턴

표준 카드 컴포넌트

가장 일반적인 export는 'Card'입니다. 네비게이션을 위한 'href'와 외부 스타일링을 위한 'className'을 허용해야 합니다.

고급 패턴

액션 및 상태 처리

Unit은 토글 버튼이나 상태 표시기와 같은 상호 작용 요소를 포함할 수 있습니다.

Load.Units와의 통합

주요 Props

옵션	타입	기본값	설명
init	ClientInit<T, L>	-	초기 데이터 소스 토큰입니다.
renderItem	(model, idx) => ReactNode	-	각 항목을 위한 렌더링 함수입니다.
renderList	(list) => ReactNode	-	renderItem의 대안입니다. 리스트 제어권을 가집니다.
renderEmpty	() => ReactNode	-	비어 있을 때 렌더링할 컴포넌트입니다.
pagination	boolean	true	페이지 매김 활성화 여부입니다.
filter	(item, idx) => boolean	-	클라이언트 측 필터 함수입니다.
sort	(a, b) => number	-	클라이언트 측 정렬 함수입니다.
className	string	-	컨테이너를 위한 클래스입니다.