model.store.ts

store 파일은 클라이언트 측 상태를 관리하고 Signals를 통해 서버와 동기화합니다. Zustand의 기능을 확장합니다.

🏪클라이언트 상태

UI 상태, 폼 데이터, 캐시된 서버 데이터를 반응형으로 관리합니다.

Store 클래스 구조

Store는 store() 함수를 사용하여 정의되며, Signal(서버 동기화 정의)과 초기 상태를 바인딩합니다.

product.store.ts

상태 상호작용

Store는 상태와 안전하게 상호작용하기 위한 내장 메서드를 제공합니다.

method	설명	예제
get()	스토어 상태의 현재 스냅샷을 가져옵니다.
set(state)	스토어 상태를 업데이트합니다. 얕게 병합됩니다.
pick(...keys)	상태에서 특정 속성을 선택합니다. Non-nullable이 보장됩니다. (null/undefined일 경우 에러 발생)

get()

스토어 상태의 현재 스냅샷을 가져옵니다.

set(state)

스토어 상태를 업데이트합니다. 얕게 병합됩니다.

pick(...keys)

상태에서 특정 속성을 선택합니다. Non-nullable이 보장됩니다. (null/undefined일 경우 에러 발생)

⚡Non-nullable 보장

'pick' 메서드는 요청한 키 중 하나라도 null이나 undefined이면 즉시 에러를 발생시킵니다. null 처리가 필요하다면 'get'을 사용하세요.

표준 모델 API (기본)

이러한 상태와 동작은 Signal에 바인딩된 모든 Store에 대해 자동으로 생성됩니다. 단일 모델 인스턴스에 대한 기본 CRUD 및 양식 작업을 처리합니다.

2.1. Base State (Standard)

field	설명
st.<model>: Full \| null	The single instance of the model.
st.<model>Loading: string \| boolean	Loading status of the single instance.
st.<model>Form: Default	Form state for creating or updating.
st.<model>FormLoading: string \| boolean	Loading status of the form.
st.<model>Submit: Submit	Start time of the latest submit.
st.<model>ViewAt: Date	Time when the detailed view was accessed.
st.<model>Modal: string \| null	Modal ID associated with this model.

st.<model>: Full | null

The single instance of the model.

st.<model>Loading: string | boolean

Loading status of the single instance.

st.<model>Form: Default

Form state for creating or updating.

st.<model>FormLoading: string | boolean

Loading status of the form.

st.<model>Submit: Submit

Start time of the latest submit.

st.<model>ViewAt: Date

Time when the detailed view was accessed.

st.<model>Modal: string | null

Modal ID associated with this model.

2.2. Base Actions (Standard)

method	설명
create<Class>InForm(options?): Promise<void>	Create a document using form state.
update<Class>InForm(options?): Promise<void>	Update a document using form state.
create<Class>(data, options?): Promise<void>	Create a new document with data.
update<Class>(id, data, options?): Promise<void>	Update an existing document.
remove<Class>(id, options?): Promise<void>	Remove a document.
check<Class>Submitable(disabled?): Promise<void>	Check if the form can be submitted.
submit<Class>(options?): Promise<void>	Submit the form (create or update).
new<Class>(partial?, options?): void	Initialize form for new creation.
edit<Class>(model, options?): Promise<void>	Initialize form for editing.
merge<Class>(model, data, options?): Promise<void>	Merge data into existing document.
view<Class>(model, options?): Promise<void>	Open detailed view.
set<Class>(...models): void	Manually set model cache.
reset<Class>(model?): void	Reset model state.

create<Class>InForm(options?): Promise<void>

Create a document using form state.

update<Class>InForm(options?): Promise<void>

Update a document using form state.

create<Class>(data, options?): Promise<void>

Create a new document with data.

Slice 자동 생성 기능

상태와 메서드는 model.signal.ts에 정의된 Slice를 기반으로 생성됩니다. 여기에는 '기본 Slice'(항상 사용 가능)와 모든 커스텀 Slice가 포함됩니다.

3.1. Slice Definition (Signal)

product.signal.ts

3.2. Generated Slice State

<Slice>를 대문자로 시작하는 Slice 이름으로 대체하세요. 기본 Slice의 경우, 대개 <Slice> 접미사는 본질적으로 모델 이름입니다.

field	설명
st.default<Class>: Default	Default value for the slice.
st.<slice>List: DataList<Light>	List of data loaded by init/refresh.
st.<slice>ListLoading: boolean	Loading status of the list.
st.<slice>InitList: DataList<Light>	Initial list snapshot.
st.<slice>InitAt: Date	Time when the list was initialized.
st.<slice>Selection: DataList<Light>	Selected items in the list.
st.<slice>Insight: Insight	Insight data for the list (e.g. counts).
st.lastPageOf<Slice>: number	Last accessed page number.
st.pageOf<Slice>: number	Current page number.
st.limitOf<Slice>: number	Items per page.
st.queryArgsOf<Slice>: QueryArgs	Current query arguments.
st.sortOf<Slice>: Sort	Current sort setting.

st.default<Class>: Default

Default value for the slice.

st.<slice>List: DataList<Light>

List of data loaded by init/refresh.

st.<slice>ListLoading: boolean

Loading status of the list.

st.<slice>InitList: DataList<Light>

Initial list snapshot.

st.<slice>InitAt: Date

Time when the list was initialized.

st.<slice>Selection: DataList<Light>

Selected items in the list.

st.<slice>Insight: Insight

Insight data for the list (e.g. counts).

st.lastPageOf<Slice>: number

Last accessed page number.

st.pageOf<Slice>: number

Current page number.

st.limitOf<Slice>: number

Items per page.

st.queryArgsOf<Slice>: QueryArgs

Current query arguments.

3.3. Generated Slice Actions

method	설명
init<Slice>(...args): Promise<void>	Initialize list with query args.
refresh<Slice>(initForm?): Promise<void>	Reload list with strict consistency.
select<Slice>(model, options?): void	Update selection state.
setPageOf<Slice>(page, options?): Promise<void>	Change page and reload.
addPageOf<Slice>(page, options?): Promise<void>	Load next page and append.
setLimitOf<Slice>(limit, options?): Promise<void>	Change list limit and reload.
setQueryArgsOf<Slice>(...args): Promise<void>	Change query arguments and reload.
setSortOf<Slice>(sort, options?): Promise<void>	Change sort and reload.

init<Slice>(...args): Promise<void>

Initialize list with query args.

refresh<Slice>(initForm?): Promise<void>

Reload list with strict consistency.

select<Slice>(model, options?): void

Update selection state.

setPageOf<Slice>(page, options?): Promise<void>

Change page and reload.

addPageOf<Slice>(page, options?): Promise<void>

Load next page and append.

setLimitOf<Slice>(limit, options?): Promise<void>

사용 패턴

Store와 상호작용하는 방법은 두 가지가 있습니다: Store 클래스 내부에서와 React 컴포넌트에서입니다.

4.1. Inside Store Class

'this.get()'으로 상태에 접근하고 'this.anyAction()'으로 메서드를 호출하세요. 업데이트에는 'this.set()'을 사용합니다.

Inside Store

4.2. Inside React Component

반응형 상태 접근을 위해 'st.use.stateName()' 훅을 사용하고, 액션 호출을 위해 'st.do.actionName()'을 사용하세요.

Inside Component

자동 생성된 Setter

상태 속성을 정의하면 해당 Setter 메서드가 'st.do'에 자동으로 추가됩니다. 'st.set'을 직접 사용할 수도 있습니다.

Setter Examples

다른 스토어 (전역)

Store는 단일 전역 인스턴스이므로 다른 스토어의 상태와 액션에 접근할 수 있습니다. 단, TypeScript를 만족시키기 위해 'this'를 'RootStore'로 명시적으로 캐스팅해야 합니다.

RootStore: 애플리케이션의 모든 Store 정의가 병합된 타입입니다.

product.store.ts

Store 모범 사례

1️⃣'pick'을 사용하여 상태 접근

특정 필드만 필요할 때는 'get'보다 'pick'을 선호하세요. 의존성을 명확하게 합니다.

2️⃣비동기 로직은 Store에

UI 관련 비동기 작업(fetch, submit)은 Store에 속합니다. 순수 비즈니스 로직은 Service에 속합니다.

method

설명

예제

get()

스토어 상태의 현재 스냅샷을 가져옵니다.

set(state)

스토어 상태를 업데이트합니다. 얕게 병합됩니다.

pick(...keys)

상태에서 특정 속성을 선택합니다. Non-nullable이 보장됩니다. (null/undefined일 경우 에러 발생)

field

설명

st.<model>: Full | null

The single instance of the model.

st.<model>Loading: string | boolean

Loading status of the single instance.

st.<model>Form: Default

Form state for creating or updating.

st.<model>FormLoading: string | boolean

Loading status of the form.

st.<model>Submit: Submit

Start time of the latest submit.

st.<model>ViewAt: Date

Time when the detailed view was accessed.

st.<model>Modal: string | null

Modal ID associated with this model.

method

설명

create<Class>InForm(options?): Promise<void>

Create a document using form state.

update<Class>InForm(options?): Promise<void>

Update a document using form state.

create<Class>(data, options?): Promise<void>

Create a new document with data.

update<Class>(id, data, options?): Promise<void>

Update an existing document.

remove<Class>(id, options?): Promise<void>

Remove a document.

check<Class>Submitable(disabled?): Promise<void>

Check if the form can be submitted.

submit<Class>(options?): Promise<void>

Submit the form (create or update).

new<Class>(partial?, options?): void

Initialize form for new creation.

edit<Class>(model, options?): Promise<void>

Initialize form for editing.

merge<Class>(model, data, options?): Promise<void>

Merge data into existing document.

view<Class>(model, options?): Promise<void>

Open detailed view.

set<Class>(...models): void

Manually set model cache.

reset<Class>(model?): void

Reset model state.

field

설명

st.default<Class>: Default

Default value for the slice.

st.<slice>List: DataList<Light>

List of data loaded by init/refresh.

st.<slice>ListLoading: boolean

Loading status of the list.

st.<slice>InitList: DataList<Light>

Initial list snapshot.

st.<slice>InitAt: Date

Time when the list was initialized.

st.<slice>Selection: DataList<Light>

Selected items in the list.

st.<slice>Insight: Insight

Insight data for the list (e.g. counts).

st.lastPageOf<Slice>: number

Last accessed page number.

st.pageOf<Slice>: number

Current page number.

st.limitOf<Slice>: number

Items per page.

st.queryArgsOf<Slice>: QueryArgs

Current query arguments.

st.sortOf<Slice>: Sort

Current sort setting.

method

설명

init<Slice>(...args): Promise<void>

Initialize list with query args.

refresh<Slice>(initForm?): Promise<void>

Reload list with strict consistency.

select<Slice>(model, options?): void

Update selection state.

setPageOf<Slice>(page, options?): Promise<void>

Change page and reload.

addPageOf<Slice>(page, options?): Promise<void>

Load next page and append.

setLimitOf<Slice>(limit, options?): Promise<void>

Change list limit and reload.

setQueryArgsOf<Slice>(...args): Promise<void>

Change query arguments and reload.

setSortOf<Slice>(sort, options?): Promise<void>

Change sort and reload.