Model.View.tsx

Model.View.tsx 파일은 적절한 모델(Full Model)의 포괄적인 프레젠테이션을 전담하는 전문 서버 컴포넌트입니다. 요약(Light Model)을 표시하는 Unit과 달리, View는 도메인 엔터티의 전체 상세 정보를 렌더링하는 역할을 하며, 주로 상세 페이지의 메인 콘텐츠로 사용됩니다.

💎전체 상세 정보

View는 본문 내용, 상세 배열 또는 Light Model에 없는 민감한 데이터를 포함하여 모델의 모든 속성에 액세스할 수 있습니다.

View vs Unit: 차이점 이해하기

깨끗한 아키텍처와 최적의 성능을 유지하기 위해 View와 Unit 컴포넌트를 구별하는 것이 중요합니다.

Comparison	설명	예제
Model.View	전체 모델(cnst.Model)을 렌더링합니다. 메인 페이지에 사용됩니다.
Model.Unit	라이트 모델(cnst.LightModel)을 렌더링합니다. 목록/카드에 사용됩니다.

Model.View

전체 모델(cnst.Model)을 렌더링합니다. 메인 페이지에 사용됩니다.

Model.Unit

라이트 모델(cnst.LightModel)을 렌더링합니다. 목록/카드에 사용됩니다.

파일 위치

File Structure

구현

View는 일반적으로 'General' 컴포넌트와 기타 전문 레이아웃을 내보냅니다. 이들은 상수에 정의된 전체 Model 타입을 받습니다.

1. Interface Definition

전체 Model 타입(예: cnst.LightProduct가 아닌 cnst.Product)을 사용하여 props를 정의하세요.

2. General Component

상세 페이지에서의 사용

View는 전체 모델이 로드되는 동적 라우트(예: [id]/page.tsx)에서 제공되도록 설계되었습니다.

Load.Page 사용

최적의 성능과 비동기 데이터의 깔끔한 처리를 위해 `Load.Page` 유틸리티를 사용하세요.

app/[lang]/shop/product/[productId]/page.tsx

Load.View

클라이언트 컴포넌트(Zone 또는 탭 레이아웃 등) 내에서 View를 사용할 때, 단순히 props를 전달하면 하이드레이션 불일치가 발생할 수 있습니다. `Load.View` 유틸리티는 모델 상태를 스토어에 안전하게 하이드레이션하여 이 문제를 해결합니다.

패턴: Zone.View 래퍼

`ClientView` 객체를 받아 `Load.View`를 사용하여 View를 렌더링하는 특수한 Zone 컴포넌트를 정의하세요.

lib/product/Product.Zone.tsx

구성 전략

이상적으로 View는 복잡한 로직이나 방대한 코드를 포함하지 않아야 합니다. View의 주된 역할은 Unit(데이터), Utility(동작), Zone(레이아웃)과 같은 작은 조각들을 조립하여 완성된 페이지를 만드는 것입니다.

View (Parent)

레이아웃, 구조적 그리드, 제목

⬇️

Children

Unit: 하위 항목, 뷰 내의 목록
Util: 상호 작용 버튼 (좋아요, 공유)
Zone: 복잡한 하위 섹션 (댓글)

상세 페이지에서의 사용