model.Template.tsx

Template은 특정 모델의 폼(Form)을 렌더링하는 전용 UI 컴포넌트입니다. Store(상태)와 Page(레이아웃) 사이를 연결합니다.

🎨프레젠테이션 컴포넌트

Template은 UI 레이아웃과 필드 렌더링에 집중해야 합니다. 비즈니스 로직은 Store나 Service에 남겨두어야 합니다.

파일 규칙

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

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

표준 구조

Template 파일은 보통 하나 이상의 라우트 컴포넌트를 export 합니다. 각 컴포넌트는 className prop을 받아야 합니다.

예제 코드

Product.Template.tsx

Template 사용 패턴

Template은 데이터 로딩, 모달 관리, 폼 제출 컨텍스트를 처리하는 래퍼 컴포넌트 내에서 사용되도록 설계되었습니다.

1. In Modal (Model.Edit)

'Model.Edit'을 사용하여 모달이나 인라인 편집 뷰 내에서 Template을 렌더링하세요. 래퍼가 Slice 이름과 모델 ID를 기반으로 편집 상태를 처리합니다.

Ticket.Util.tsx

2. In Page (Load.Edit)

로더에 의해 데이터가 미리 로드되는 전체 페이지 편집 시나리오에는 'Load.Edit'을 사용하세요. 로더의 'edit' 객체를 Template에 연결합니다.

EditPage.tsx

Template 모범 사례

1️⃣Layout.Template 사용

폼 컨텍스트 내에서 일관된 패딩과 간격을 보장하기 위해 항상 <Layout.Template>으로 콘텐츠를 감싸세요.

2️⃣자동 생성된 액션 사용

가능한 경우 'onChange'를 'st.do.set[Field]On[Model]'에 직접 바인딩하세요. 보일러플레이트 코드를 줄여줍니다.

3️⃣대형 폼 분리

모델에 필드가 많은 경우, 같은 파일 내에 여러 컴포넌트(예: General, Detail, Settings)를 생성하여 논리적으로 정리하세요.

model.Template.tsx

Template은 특정 모델의 폼(Form)을 렌더링하는 전용 UI 컴포넌트입니다. Store(상태)와 Page(레이아웃) 사이를 연결합니다.

🎨프레젠테이션 컴포넌트

Template은 UI 레이아웃과 필드 렌더링에 집중해야 합니다. 비즈니스 로직은 Store나 Service에 남겨두어야 합니다.

파일 규칙

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

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

표준 구조

Template 파일은 보통 하나 이상의 라우트 컴포넌트를 export 합니다. 각 컴포넌트는 className prop을 받아야 합니다.

예제 코드

Product.Template.tsx

Template 사용 패턴

Template은 데이터 로딩, 모달 관리, 폼 제출 컨텍스트를 처리하는 래퍼 컴포넌트 내에서 사용되도록 설계되었습니다.

1. In Modal (Model.Edit)

'Model.Edit'을 사용하여 모달이나 인라인 편집 뷰 내에서 Template을 렌더링하세요. 래퍼가 Slice 이름과 모델 ID를 기반으로 편집 상태를 처리합니다.

Ticket.Util.tsx

2. In Page (Load.Edit)

로더에 의해 데이터가 미리 로드되는 전체 페이지 편집 시나리오에는 'Load.Edit'을 사용하세요. 로더의 'edit' 객체를 Template에 연결합니다.

EditPage.tsx

Template 모범 사례

1️⃣Layout.Template 사용

폼 컨텍스트 내에서 일관된 패딩과 간격을 보장하기 위해 항상 <Layout.Template>으로 콘텐츠를 감싸세요.

2️⃣자동 생성된 액션 사용

가능한 경우 'onChange'를 'st.do.set[Field]On[Model]'에 직접 바인딩하세요. 보일러플레이트 코드를 줄여줍니다.

3️⃣대형 폼 분리

모델에 필드가 많은 경우, 같은 파일 내에 여러 컴포넌트(예: General, Detail, Settings)를 생성하여 논리적으로 정리하세요.