@ehfuse/forma 1.0.4 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +107 -59
- package/dist/esm/hooks/useForm.d.ts +2 -4
- package/dist/esm/hooks/useForm.d.ts.map +1 -1
- package/dist/esm/hooks/useForm.js +36 -71
- package/dist/esm/hooks/useForm.js.map +1 -1
- package/dist/esm/hooks/useFormaState.d.ts +79 -0
- package/dist/esm/hooks/useFormaState.d.ts.map +1 -0
- package/dist/esm/hooks/useFormaState.js +154 -0
- package/dist/esm/hooks/useFormaState.js.map +1 -0
- package/dist/esm/index.d.ts +4 -2
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/hooks/useForm.d.ts +2 -4
- package/dist/hooks/useForm.d.ts.map +1 -1
- package/dist/hooks/useForm.js +35 -70
- package/dist/hooks/useForm.js.map +1 -1
- package/dist/hooks/useFormaState.d.ts +79 -0
- package/dist/hooks/useFormaState.d.ts.map +1 -0
- package/dist/hooks/useFormaState.js +157 -0
- package/dist/hooks/useFormaState.js.map +1 -0
- package/dist/index.d.ts +4 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -9,19 +9,19 @@
|
|
|
9
9
|
|
|
10
10
|
### 한국어 | Korean
|
|
11
11
|
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
12
|
+
- 🚀 **[시작 가이드](./docs/getting-started-ko.md)** - 단계별 튜토리얼과 예제
|
|
13
|
+
- 📖 **[완전한 문서](./docs/README-ko.md)** - API 레퍼런스, 사용 사례, 고급 기능
|
|
14
|
+
- 📋 **[API 레퍼런스](./docs/API-ko.md)** - 모든 메서드, 타입, 마이그레이션 가이드
|
|
15
|
+
- ⚡ **[성능 최적화 가이드](./docs/best-practices-ko.md)** - 최고 성능을 위한 모범 사례
|
|
16
|
+
- 🏠 **[GitHub](https://github.com/ehfuse/forma)**
|
|
17
17
|
|
|
18
18
|
### English
|
|
19
19
|
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
20
|
+
- 🚀 **[Getting Started Guide](./docs/getting-started-en.md)** - Step-by-step tutorial and examples
|
|
21
|
+
- 📖 **[Complete Documentation](./docs/README-en.md)** - API reference, use cases, advanced features
|
|
22
|
+
- 📋 **[API Reference](./docs/API-en.md)** - All methods, types, migration guide
|
|
23
|
+
- ⚡ **[Performance Optimization Guide](./docs/best-practices-en.md)** - Best practices for optimal performance
|
|
24
|
+
- 🏠 **[GitHub](https://github.com/ehfuse/forma)**
|
|
25
25
|
|
|
26
26
|
Forma는 React 애플리케이션에서 폼 상태를 효율적으로 관리하기 위한 고성능 라이브러리입니다. 개별 필드 구독을 통한 선택적 리렌더링과 글로벌 폼 상태 공유 기능을 제공합니다.
|
|
27
27
|
|
|
@@ -29,13 +29,14 @@ _Forma is a high-performance library for efficiently managing form state in Reac
|
|
|
29
29
|
|
|
30
30
|
## 🚀 주요 특징 | Key Features
|
|
31
31
|
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
35
|
-
-
|
|
36
|
-
-
|
|
37
|
-
-
|
|
38
|
-
-
|
|
32
|
+
- ✅ **개별 필드 구독** | **Individual Field Subscription**: 필드별 선택적 리렌더링으로 최적화된 성능
|
|
33
|
+
- ✅ **범용 상태 관리** | **General State Management**: `useFormaState`로 폼 외 일반 상태도 효율적 관리
|
|
34
|
+
- ✅ **Dot Notation 최적화** | **Dot Notation Optimization**: `user.profile.name` 형태의 중첩 객체 접근
|
|
35
|
+
- ✅ **MUI 완전 호환** | **Full MUI Compatibility**: Material-UI 컴포넌트와 완벽한 통합
|
|
36
|
+
- ✅ **글로벌 폼 상태** | **Global Form State**: 여러 컴포넌트 간 폼 상태 공유
|
|
37
|
+
- ✅ **폼 등록 시스템** | **Form Registration System**: 기존 폼을 글로벌로 등록 가능
|
|
38
|
+
- ✅ **TypeScript 완전 지원** | **Full TypeScript Support**: 강력한 타입 안전성
|
|
39
|
+
- ✅ **React 19 최적화** | **React 19 Optimized**: 최신 React 기능 활용
|
|
39
40
|
|
|
40
41
|
## 📦 설치 | Installation
|
|
41
42
|
|
|
@@ -49,6 +50,8 @@ yarn add @ehfuse/forma
|
|
|
49
50
|
|
|
50
51
|
## 🎯 빠른 시작 | Quick Start
|
|
51
52
|
|
|
53
|
+
### 폼 상태 관리 | Form State Management
|
|
54
|
+
|
|
52
55
|
```tsx
|
|
53
56
|
import { useForm } from "@ehfuse/forma";
|
|
54
57
|
|
|
@@ -78,19 +81,64 @@ function MyForm() {
|
|
|
78
81
|
}
|
|
79
82
|
```
|
|
80
83
|
|
|
84
|
+
### 일반 상태 관리 | General State Management
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
import { useFormaState } from "@ehfuse/forma";
|
|
88
|
+
|
|
89
|
+
function UserDashboard() {
|
|
90
|
+
const state = useFormaState({
|
|
91
|
+
todos: [
|
|
92
|
+
{ id: 1, text: "Learn React", completed: false },
|
|
93
|
+
{ id: 2, text: "Build app", completed: false },
|
|
94
|
+
],
|
|
95
|
+
filter: "all",
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
// 개별 필드 구독 - 해당 필드가 변경될 때만 리렌더링
|
|
99
|
+
const filter = state.useValue("filter");
|
|
100
|
+
|
|
101
|
+
// ✅ 배열 길이만 구독 (항목 추가/삭제 시에만 리렌더링)
|
|
102
|
+
const todosLength = state.useValue("todos.length");
|
|
103
|
+
|
|
104
|
+
// ✅ 특정 할 일의 텍스트만 구독 (dot notation 활용)
|
|
105
|
+
const firstTodoText = state.useValue("todos.0.text");
|
|
106
|
+
|
|
107
|
+
const addTodo = () => {
|
|
108
|
+
const todos = state.getValues().todos;
|
|
109
|
+
state.setValue("todos", [
|
|
110
|
+
...todos,
|
|
111
|
+
{ id: Date.now(), text: "New todo", completed: false },
|
|
112
|
+
]);
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
return (
|
|
116
|
+
<div>
|
|
117
|
+
<p>필터: {filter}</p>
|
|
118
|
+
<p>첫 번째 할 일: {firstTodoText}</p>
|
|
119
|
+
<p>총 개수: {todosLength}</p>
|
|
120
|
+
<button onClick={addTodo}>할 일 추가</button>
|
|
121
|
+
<button onClick={() => state.setValue("filter", "completed")}>
|
|
122
|
+
완료된 항목 보기
|
|
123
|
+
</button>
|
|
124
|
+
</div>
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
81
129
|
## � 문서 | Documentation
|
|
82
130
|
|
|
83
131
|
### 한국어 | Korean
|
|
84
132
|
|
|
85
|
-
-
|
|
86
|
-
-
|
|
87
|
-
-
|
|
133
|
+
- 📖 **[완전한 문서](./docs/README-ko.md)** - API 레퍼런스, 사용 사례, 고급 기능
|
|
134
|
+
- 🌐 **[useGlobalForm 사용법](./docs/useGlobalForm-guide-ko.md)** - 글로벌 폼 상태 관리 가이드
|
|
135
|
+
- ⚡ **[성능 최적화 가이드](./docs/best-practices-ko.md)** - 최고 성능을 위한 모범 사례
|
|
88
136
|
|
|
89
137
|
### English
|
|
90
138
|
|
|
91
|
-
-
|
|
92
|
-
-
|
|
93
|
-
-
|
|
139
|
+
- 📖 **[Complete Documentation](./docs/README-en.md)** - API reference, use cases, advanced features
|
|
140
|
+
- 🌐 **[useGlobalForm Usage Guide](./docs/useGlobalForm-guide-en.md)** - Global form state management guide
|
|
141
|
+
- ⚡ **[Performance Optimization Guide](./docs/best-practices-en.md)** - Best practices for optimal performance
|
|
94
142
|
|
|
95
143
|
## 🎯 When to choose Forma?
|
|
96
144
|
|
|
@@ -107,52 +155,52 @@ Forma는 **폼 상태 관리에 특화**된 라이브러리로 특정 시나리
|
|
|
107
155
|
**🎨 MUI (Material-UI) Projects**
|
|
108
156
|
**MUI (Material-UI) 프로젝트**
|
|
109
157
|
|
|
110
|
-
-
|
|
111
|
-
|
|
112
|
-
-
|
|
113
|
-
|
|
114
|
-
-
|
|
115
|
-
|
|
158
|
+
- Seamless integration with MUI components
|
|
159
|
+
MUI 컴포넌트와 완벽한 통합
|
|
160
|
+
- No additional wrapper components needed
|
|
161
|
+
추가 래퍼 컴포넌트 불필요
|
|
162
|
+
- Built-in support for MUI's controlled component patterns
|
|
163
|
+
MUI의 제어 컴포넌트 패턴 내장 지원
|
|
116
164
|
|
|
117
165
|
**⚡ Performance-Critical Forms**
|
|
118
166
|
**성능이 중요한 폼**
|
|
119
167
|
|
|
120
|
-
-
|
|
121
|
-
|
|
122
|
-
-
|
|
123
|
-
|
|
124
|
-
-
|
|
125
|
-
|
|
168
|
+
- Large forms with many fields (50+ inputs)
|
|
169
|
+
많은 필드가 있는 대규모 폼 (50개 이상 입력)
|
|
170
|
+
- Real-time data visualization forms
|
|
171
|
+
실시간 데이터 시각화 폼
|
|
172
|
+
- Forms that update frequently during user interaction
|
|
173
|
+
사용자 상호작용 중 자주 업데이트되는 폼
|
|
126
174
|
|
|
127
175
|
**🔄 Multi-Step & Global Forms**
|
|
128
176
|
**멀티 스텝 & 글로벌 폼**
|
|
129
177
|
|
|
130
|
-
-
|
|
131
|
-
|
|
132
|
-
-
|
|
133
|
-
|
|
134
|
-
-
|
|
135
|
-
|
|
178
|
+
- Wizard-style multi-step forms
|
|
179
|
+
마법사 스타일의 멀티 스텝 폼
|
|
180
|
+
- Forms shared across multiple components
|
|
181
|
+
여러 컴포넌트에서 공유되는 폼
|
|
182
|
+
- Registration flows with data persistence
|
|
183
|
+
데이터 지속성이 있는 등록 플로우
|
|
136
184
|
|
|
137
185
|
**🏗️ Complex Nested Data**
|
|
138
186
|
**복잡한 중첩 데이터**
|
|
139
187
|
|
|
140
|
-
-
|
|
141
|
-
|
|
142
|
-
-
|
|
143
|
-
|
|
144
|
-
-
|
|
145
|
-
|
|
188
|
+
- User profiles with nested address/contact info
|
|
189
|
+
중첩된 주소/연락처 정보가 있는 사용자 프로필
|
|
190
|
+
- Product configurations with multiple layers
|
|
191
|
+
다층 구조의 제품 구성
|
|
192
|
+
- Settings panels with grouped options
|
|
193
|
+
그룹화된 옵션이 있는 설정 패널
|
|
146
194
|
|
|
147
195
|
**📊 Dynamic Form Generation**
|
|
148
196
|
**동적 폼 생성**
|
|
149
197
|
|
|
150
|
-
-
|
|
151
|
-
|
|
152
|
-
-
|
|
153
|
-
|
|
154
|
-
-
|
|
155
|
-
|
|
198
|
+
- Forms generated from API schemas
|
|
199
|
+
API 스키마에서 생성되는 폼
|
|
200
|
+
- Conditional field rendering
|
|
201
|
+
조건부 필드 렌더링
|
|
202
|
+
- Dynamic validation rules
|
|
203
|
+
동적 검증 규칙
|
|
156
204
|
|
|
157
205
|
## 🎯 핵심 성능 원칙 | Core Performance Principles
|
|
158
206
|
|
|
@@ -168,15 +216,15 @@ const userEmail = form.useFormValue("user.email");
|
|
|
168
216
|
|
|
169
217
|
## 🌐 링크 | Links
|
|
170
218
|
|
|
171
|
-
-
|
|
172
|
-
-
|
|
173
|
-
-
|
|
219
|
+
- **📦 NPM**: [https://www.npmjs.com/package/@ehfuse/forma](https://www.npmjs.com/package/@ehfuse/forma)
|
|
220
|
+
- **🐙 GitHub**: [https://github.com/ehfuse/forma](https://github.com/ehfuse/forma)
|
|
221
|
+
- **📄 라이선스 | License**: [MIT](./LICENSE)
|
|
174
222
|
|
|
175
223
|
## 📞 연락처 | Contact
|
|
176
224
|
|
|
177
|
-
-
|
|
178
|
-
-
|
|
179
|
-
-
|
|
225
|
+
- **개발자 | Developer**: 김영진 (KIM YOUNG JIN)
|
|
226
|
+
- **이메일 | Email**: ehfuse@gmail.com
|
|
227
|
+
- **GitHub**: [@ehfuse](https://github.com/ehfuse)
|
|
180
228
|
|
|
181
229
|
---
|
|
182
230
|
|
|
@@ -27,7 +27,6 @@
|
|
|
27
27
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
28
28
|
* SOFTWARE.
|
|
29
29
|
*/
|
|
30
|
-
import { FieldStore } from "../core/FieldStore";
|
|
31
30
|
import { FormChangeEvent, DatePickerChangeHandler, UseFormProps } from "../types/form";
|
|
32
31
|
import React from "react";
|
|
33
32
|
/**
|
|
@@ -50,7 +49,7 @@ export declare function useForm<T extends Record<string, any>>({ initialValues,
|
|
|
50
49
|
isSubmitting: boolean;
|
|
51
50
|
isValidating: boolean;
|
|
52
51
|
isModified: boolean;
|
|
53
|
-
useFormValue: (fieldName: string) =>
|
|
52
|
+
useFormValue: (fieldName: string) => any;
|
|
54
53
|
getFormValue: (fieldName: string) => any;
|
|
55
54
|
getFormValues: () => T;
|
|
56
55
|
setFormValue: (name: string, value: any) => void;
|
|
@@ -61,7 +60,6 @@ export declare function useForm<T extends Record<string, any>>({ initialValues,
|
|
|
61
60
|
submit: (e?: React.FormEvent) => Promise<boolean>;
|
|
62
61
|
resetForm: () => void;
|
|
63
62
|
validateForm: (valuesToValidate?: T) => Promise<boolean>;
|
|
64
|
-
|
|
65
|
-
_store: FieldStore<T>;
|
|
63
|
+
_store: import("..").FieldStore<T>;
|
|
66
64
|
};
|
|
67
65
|
//# sourceMappingURL=useForm.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../hooks/useForm.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../hooks/useForm.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EACH,eAAe,EACf,uBAAuB,EACvB,YAAY,EACf,MAAM,eAAe,CAAC;AAGvB,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EACnD,aAAa,EACb,QAAQ,EACR,UAAU,EACV,UAAU,EACV,cAAc,GACjB,EAAE,YAAY,CAAC,CAAC,CAAC;;;;8BA8IE,MAAM;8BAnBN,MAAM,KAAG,GAAG;yBASU,CAAC;yBAhD5B,MAAM,SAAS,GAAG;+BAmBb,OAAO,CAAC,CAAC,CAAC;6CAUH,CAAC;0BApFhB,eAAe;;iBAyJR,KAAK,CAAC,SAAS,KAAG,OAAO,CAAC,OAAO,CAAC;;sCA9BnB,CAAC;;EA2GlC"}
|
|
@@ -27,25 +27,8 @@
|
|
|
27
27
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
28
28
|
* SOFTWARE.
|
|
29
29
|
*/
|
|
30
|
-
import {
|
|
31
|
-
import { useEffect, useState, useCallback,
|
|
32
|
-
/**
|
|
33
|
-
* 개별 필드 구독 / Individual field subscription
|
|
34
|
-
* 특정 필드만 구독하여 해당 필드가 변경될 때만 리렌더링
|
|
35
|
-
* Subscribe to specific field only, re-render only when that field changes
|
|
36
|
-
*/
|
|
37
|
-
function useFieldValue(store, fieldName) {
|
|
38
|
-
const [value, setValue] = useState(() => store.getValue(fieldName));
|
|
39
|
-
useEffect(() => {
|
|
40
|
-
// 구독 설정 / Setup subscription
|
|
41
|
-
const unsubscribe = store.subscribe(fieldName, () => {
|
|
42
|
-
const newValue = store.getValue(fieldName);
|
|
43
|
-
setValue(newValue);
|
|
44
|
-
});
|
|
45
|
-
return unsubscribe;
|
|
46
|
-
}, [fieldName]); // store 의존성 제거로 불필요한 재구독 방지 / Remove store dependency to prevent unnecessary re-subscriptions
|
|
47
|
-
return value;
|
|
48
|
-
}
|
|
30
|
+
import { useFormaState } from "./useFormaState";
|
|
31
|
+
import { useEffect, useState, useCallback, useMemo, } from "react";
|
|
49
32
|
/**
|
|
50
33
|
* Forma 핵심 폼 관리 훅 / Forma core form management hook
|
|
51
34
|
*
|
|
@@ -63,38 +46,22 @@ function useFieldValue(store, fieldName) {
|
|
|
63
46
|
* @returns 폼 관리 API 객체 / Form management API object
|
|
64
47
|
*/
|
|
65
48
|
export function useForm({ initialValues, onSubmit, onValidate, onComplete, _externalStore, }) {
|
|
66
|
-
//
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
if (_externalStore) {
|
|
70
|
-
storeRef.current = _externalStore;
|
|
71
|
-
}
|
|
72
|
-
else if (!storeRef.current) {
|
|
73
|
-
storeRef.current = new FieldStore(initialValues);
|
|
74
|
-
}
|
|
75
|
-
const store = storeRef.current;
|
|
49
|
+
// useFormaState를 기반으로 사용 / Use useFormaState as foundation
|
|
50
|
+
const fieldState = useFormaState(initialValues, { _externalStore });
|
|
51
|
+
// 폼 특정 상태 관리 / Form-specific state management
|
|
76
52
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
77
53
|
const [isValidating, setIsValidating] = useState(false);
|
|
54
|
+
// 폼이 수정되었는지 확인 / Check if form is modified
|
|
55
|
+
// Store의 변경 사항을 추적하여 효율적으로 감지
|
|
78
56
|
const [isModified, setIsModified] = useState(false);
|
|
79
|
-
// 전역 상태 구독 (isModified 추적) / Global state subscription (isModified tracking)
|
|
80
|
-
useEffect(() => {
|
|
81
|
-
const checkModified = () => {
|
|
82
|
-
const modified = store.isModified();
|
|
83
|
-
setIsModified(modified);
|
|
84
|
-
};
|
|
85
|
-
checkModified();
|
|
86
|
-
const unsubscribe = store.subscribeGlobal(checkModified);
|
|
87
|
-
return unsubscribe;
|
|
88
|
-
}, [store]);
|
|
89
|
-
// 호환성을 위한 values 객체 (비권장) / Values object for compatibility (not recommended)
|
|
90
|
-
const [valuesSnapshot, setValuesSnapshot] = useState(() => store.getValues());
|
|
91
57
|
useEffect(() => {
|
|
92
|
-
const unsubscribe =
|
|
93
|
-
|
|
58
|
+
const unsubscribe = fieldState._store.subscribeGlobal(() => {
|
|
59
|
+
setIsModified(fieldState._store.isModified());
|
|
94
60
|
});
|
|
61
|
+
// 초기 상태 설정
|
|
62
|
+
setIsModified(fieldState._store.isModified());
|
|
95
63
|
return unsubscribe;
|
|
96
|
-
}, [
|
|
97
|
-
const values = valuesSnapshot;
|
|
64
|
+
}, [fieldState._store]);
|
|
98
65
|
/**
|
|
99
66
|
* 통합 폼 변경 핸들러 / Unified form change handler
|
|
100
67
|
* MUI Select, TextField, DatePicker 등 모든 컴포넌트 지원
|
|
@@ -122,8 +89,8 @@ export function useForm({ initialValues, onSubmit, onValidate, onComplete, _exte
|
|
|
122
89
|
else if (value === null) {
|
|
123
90
|
newValue = undefined;
|
|
124
91
|
}
|
|
125
|
-
|
|
126
|
-
}, [
|
|
92
|
+
fieldState.setValue(name, newValue);
|
|
93
|
+
}, [fieldState.setValue]);
|
|
127
94
|
/**
|
|
128
95
|
* DatePicker 전용 변경 핸들러 / DatePicker-specific change handler
|
|
129
96
|
* 간편한 사용을 위한 커링 함수 / Curried function for convenient usage
|
|
@@ -138,9 +105,9 @@ export function useForm({ initialValues, onSubmit, onValidate, onComplete, _exte
|
|
|
138
105
|
else if (value === null) {
|
|
139
106
|
newValue = undefined;
|
|
140
107
|
}
|
|
141
|
-
|
|
108
|
+
fieldState.setValue(fieldName, newValue);
|
|
142
109
|
};
|
|
143
|
-
}, [
|
|
110
|
+
}, [fieldState.setValue]);
|
|
144
111
|
/**
|
|
145
112
|
* 개별 필드 값 설정 / Set individual field value
|
|
146
113
|
*/
|
|
@@ -153,40 +120,40 @@ export function useForm({ initialValues, onSubmit, onValidate, onComplete, _exte
|
|
|
153
120
|
else if (value === null) {
|
|
154
121
|
processedValue = undefined;
|
|
155
122
|
}
|
|
156
|
-
|
|
157
|
-
}, [
|
|
123
|
+
fieldState.setValue(name, processedValue);
|
|
124
|
+
}, [fieldState.setValue]);
|
|
158
125
|
/**
|
|
159
126
|
* 전체 폼 값 설정 / Set all form values
|
|
160
127
|
*/
|
|
161
128
|
const setFormValues = useCallback((newValues) => {
|
|
162
|
-
|
|
163
|
-
}, [
|
|
129
|
+
fieldState.setValues(newValues);
|
|
130
|
+
}, [fieldState.setValues]);
|
|
164
131
|
/**
|
|
165
132
|
* 초기값 재설정 / Reset initial values
|
|
166
133
|
*/
|
|
167
134
|
const setInitialFormValues = useCallback((newInitialValues) => {
|
|
168
|
-
|
|
169
|
-
}, [
|
|
135
|
+
fieldState._store.setInitialValues(newInitialValues);
|
|
136
|
+
}, [fieldState._store]);
|
|
170
137
|
/**
|
|
171
138
|
* 구독 없이 현재 값만 가져오기 / Get current value without subscription
|
|
172
139
|
*/
|
|
173
140
|
const getFormValue = useCallback((fieldName) => {
|
|
174
|
-
return
|
|
175
|
-
}, [
|
|
141
|
+
return fieldState._store.getValue(fieldName);
|
|
142
|
+
}, [fieldState._store]);
|
|
176
143
|
/**
|
|
177
144
|
* 모든 폼 값 가져오기 / Get all form values
|
|
178
145
|
*/
|
|
179
146
|
const getFormValues = useCallback(() => {
|
|
180
|
-
return
|
|
181
|
-
}, [
|
|
147
|
+
return fieldState.getValues();
|
|
148
|
+
}, [fieldState.getValues]);
|
|
182
149
|
/**
|
|
183
150
|
* 개별 필드 구독 Hook / Individual field subscription hook
|
|
184
151
|
* 해당 필드가 변경될 때만 컴포넌트가 리렌더링됩니다
|
|
185
152
|
* Component re-renders only when the specific field changes
|
|
186
153
|
*/
|
|
187
154
|
const useFormValue = useCallback((fieldName) => {
|
|
188
|
-
return
|
|
189
|
-
}, [
|
|
155
|
+
return fieldState.useValue(fieldName);
|
|
156
|
+
}, [fieldState.useValue]);
|
|
190
157
|
/**
|
|
191
158
|
* 폼 검증 / Form validation
|
|
192
159
|
*/
|
|
@@ -194,7 +161,7 @@ export function useForm({ initialValues, onSubmit, onValidate, onComplete, _exte
|
|
|
194
161
|
if (!onValidate)
|
|
195
162
|
return true;
|
|
196
163
|
setIsValidating(true);
|
|
197
|
-
const currentValues = valuesToValidate ||
|
|
164
|
+
const currentValues = valuesToValidate || fieldState.getValues();
|
|
198
165
|
try {
|
|
199
166
|
return await onValidate(currentValues);
|
|
200
167
|
}
|
|
@@ -205,22 +172,22 @@ export function useForm({ initialValues, onSubmit, onValidate, onComplete, _exte
|
|
|
205
172
|
finally {
|
|
206
173
|
setIsValidating(false);
|
|
207
174
|
}
|
|
208
|
-
}, [onValidate,
|
|
175
|
+
}, [onValidate, fieldState.getValues]);
|
|
209
176
|
/**
|
|
210
177
|
* 폼 초기화 / Reset form
|
|
211
178
|
*/
|
|
212
179
|
const resetForm = useCallback(() => {
|
|
213
|
-
|
|
180
|
+
fieldState.reset();
|
|
214
181
|
setIsSubmitting(false);
|
|
215
182
|
setIsValidating(false);
|
|
216
|
-
}, [
|
|
183
|
+
}, [fieldState.reset]);
|
|
217
184
|
/**
|
|
218
185
|
* 폼 제출 / Submit form
|
|
219
186
|
*/
|
|
220
187
|
const submit = useCallback(async (e) => {
|
|
221
188
|
if (e)
|
|
222
189
|
e.preventDefault();
|
|
223
|
-
const currentValues =
|
|
190
|
+
const currentValues = fieldState.getValues();
|
|
224
191
|
if (!(await validateForm(currentValues))) {
|
|
225
192
|
return false;
|
|
226
193
|
}
|
|
@@ -241,7 +208,7 @@ export function useForm({ initialValues, onSubmit, onValidate, onComplete, _exte
|
|
|
241
208
|
finally {
|
|
242
209
|
setIsSubmitting(false);
|
|
243
210
|
}
|
|
244
|
-
}, [onSubmit, onComplete, validateForm,
|
|
211
|
+
}, [onSubmit, onComplete, validateForm, fieldState.getValues]);
|
|
245
212
|
return useMemo(() => ({
|
|
246
213
|
// 상태 / State
|
|
247
214
|
isSubmitting,
|
|
@@ -262,10 +229,8 @@ export function useForm({ initialValues, onSubmit, onValidate, onComplete, _exte
|
|
|
262
229
|
submit, // 폼 제출 / submit form
|
|
263
230
|
resetForm, // 폼 초기화 / reset form
|
|
264
231
|
validateForm, // 폼 검증 / validate form
|
|
265
|
-
// 호환성 / Compatibility
|
|
266
|
-
values, // 비권장: 전체 리렌더링 발생 / not recommended: causes full re-renders
|
|
267
232
|
// 고급 사용 / Advanced usage
|
|
268
|
-
_store:
|
|
233
|
+
_store: fieldState._store, // 직접 store 접근용 / direct store access
|
|
269
234
|
}), [
|
|
270
235
|
isSubmitting,
|
|
271
236
|
isValidating,
|
|
@@ -281,7 +246,7 @@ export function useForm({ initialValues, onSubmit, onValidate, onComplete, _exte
|
|
|
281
246
|
submit,
|
|
282
247
|
resetForm,
|
|
283
248
|
validateForm,
|
|
284
|
-
|
|
249
|
+
fieldState._store, // Store 의존성으로 대체
|
|
285
250
|
]);
|
|
286
251
|
}
|
|
287
252
|
//# sourceMappingURL=useForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.js","sourceRoot":"","sources":["../../../hooks/useForm.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;
|
|
1
|
+
{"version":3,"file":"useForm.js","sourceRoot":"","sources":["../../../hooks/useForm.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* useFormaState.ts
|
|
3
|
+
*
|
|
4
|
+
* Advanced state management hook with individual field subscriptions
|
|
5
|
+
* Optimized for arrays, objects, and complex nested data structures
|
|
6
|
+
*
|
|
7
|
+
* @author KIM YOUNG JIN (ehfuse@gmail.com)
|
|
8
|
+
* @license MIT License
|
|
9
|
+
*/
|
|
10
|
+
import { FieldStore } from "../core/FieldStore";
|
|
11
|
+
/**
|
|
12
|
+
* Options for configuring useFormaState hook
|
|
13
|
+
* useFormaState 훅 설정을 위한 옵션
|
|
14
|
+
*/
|
|
15
|
+
export interface UseFormaStateOptions<T extends Record<string, any>> {
|
|
16
|
+
/** Optional callback when state changes | 상태 변경 시 선택적 콜백 */
|
|
17
|
+
onChange?: (values: T) => void;
|
|
18
|
+
/** Enable deep equality checking for better performance | 성능 향상을 위한 깊은 동등성 검사 활성화 */
|
|
19
|
+
deepEquals?: boolean;
|
|
20
|
+
/** External FieldStore instance for shared state | 공유 상태를 위한 외부 FieldStore 인스턴스 */
|
|
21
|
+
_externalStore?: FieldStore<T>;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Return type of useFormaState hook
|
|
25
|
+
* useFormaState 훅의 반환 타입
|
|
26
|
+
*/
|
|
27
|
+
export interface UseFormaStateReturn<T extends Record<string, any>> {
|
|
28
|
+
/** Subscribe to a specific field value with dot notation | dot notation으로 특정 필드 값 구독 */
|
|
29
|
+
useValue: <K extends string>(path: K) => any;
|
|
30
|
+
/** Set a specific field value with dot notation | dot notation으로 특정 필드 값 설정 */
|
|
31
|
+
setValue: <K extends string>(path: K, value: any) => void;
|
|
32
|
+
/** Get all current values (non-reactive) | 모든 현재 값 가져오기 (반응형 아님) */
|
|
33
|
+
getValues: () => T;
|
|
34
|
+
/** Set all values at once | 모든 값을 한 번에 설정 */
|
|
35
|
+
setValues: (values: Partial<T>) => void;
|
|
36
|
+
/** Reset to initial values | 초기값으로 재설정 */
|
|
37
|
+
reset: () => void;
|
|
38
|
+
/** Handle standard input change events | 표준 입력 변경 이벤트 처리 */
|
|
39
|
+
handleChange: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
|
|
40
|
+
/** Direct access to the internal store for advanced usage | 고급 사용을 위한 내부 스토어 직접 접근 */
|
|
41
|
+
_store: FieldStore<T>;
|
|
42
|
+
/** Current values (reactive) | 현재 값들 (반응형) */
|
|
43
|
+
values: T;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Advanced state management hook with individual field subscriptions
|
|
47
|
+
* 개별 필드 구독을 통한 고급 상태 관리 훅
|
|
48
|
+
*
|
|
49
|
+
* Optimized for managing complex arrays, objects, and nested data structures
|
|
50
|
+
* where you want to avoid unnecessary re-renders when only specific fields change.
|
|
51
|
+
*
|
|
52
|
+
* 복잡한 배열, 객체, 중첩된 데이터 구조를 관리하는 데 최적화되어 있으며,
|
|
53
|
+
* 특정 필드만 변경될 때 불필요한 재렌더링을 방지하고자 할 때 사용합니다.
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```typescript
|
|
57
|
+
* // Managing an array of users
|
|
58
|
+
* const state = useFormaState({
|
|
59
|
+
* initialValues: {
|
|
60
|
+
* users: [
|
|
61
|
+
* { name: 'John', email: 'john@example.com', age: 30 },
|
|
62
|
+
* { name: 'Jane', email: 'jane@example.com', age: 25 }
|
|
63
|
+
* ],
|
|
64
|
+
* settings: { theme: 'dark', notifications: true }
|
|
65
|
+
* }
|
|
66
|
+
* });
|
|
67
|
+
*
|
|
68
|
+
* // Subscribe to individual fields - only these components re-render when changed
|
|
69
|
+
* const firstName = state.useValue('users.0.name'); // Only re-renders when John's name changes
|
|
70
|
+
* const userAge = state.useValue('users.1.age'); // Only re-renders when Jane's age changes
|
|
71
|
+
* const theme = state.useValue('settings.theme'); // Only re-renders when theme changes
|
|
72
|
+
*
|
|
73
|
+
* // Update specific fields
|
|
74
|
+
* state.setValue('users.0.name', 'Johnny');
|
|
75
|
+
* state.setValue('settings.theme', 'light');
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
export declare function useFormaState<T extends Record<string, any>>(initialValues: T, options?: UseFormaStateOptions<T>): UseFormaStateReturn<T>;
|
|
79
|
+
//# sourceMappingURL=useFormaState.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormaState.d.ts","sourceRoot":"","sources":["../../../hooks/useFormaState.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD;;;GAGG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAC/D,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAE/B,qFAAqF;IACrF,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,mFAAmF;IACnF,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;CAClC;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAC9D,wFAAwF;IACxF,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC;IAE7C,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAE1D,oEAAoE;IACpE,SAAS,EAAE,MAAM,CAAC,CAAC;IAEnB,6CAA6C;IAC7C,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAExC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB,4DAA4D;IAC5D,YAAY,EAAE,CACV,KAAK,EAAE,KAAK,CAAC,WAAW,CACpB,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAC7D,KACA,IAAI,CAAC;IAEV,sFAAsF;IACtF,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAEtB,8CAA8C;IAC9C,MAAM,EAAE,CAAC,CAAC;CACb;AAsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACvD,aAAa,EAAE,CAAC,EAChB,OAAO,GAAE,oBAAoB,CAAC,CAAC,CAAM,GACtC,mBAAmB,CAAC,CAAC,CAAC,CA2HxB"}
|