사람함께에이전트▾
사람 — 직접 정하고 책임지는 비즈니스 규칙과 흐름. 직접 읽어보세요.
함께 — 개념은 알아두고, 세부 규칙은 에이전트가 따릅니다.
에이전트 — 에이전트가 따르는 규칙과 레퍼런스. 필요할 때 찾아보세요.
모듈 규칙▾
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일 경우 에러 발생)
⚡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.
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.
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.
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.
loadMoreOf<Slice>(options?): Promise<void>
Append the rows after the ones loaded.
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.
사용 패턴
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에 속합니다.