1
- # ํผ์ ์์ง๋ ์๊ฐํ๊ธฐ
2
-
1
+ # ใใฉใผใ ใฎๅ้ๅบฆใซใคใใฆ่ใใ
3
2
<div style =" margin-top : 16px " >
4
- <Badge type =" info " text =" ์์ง๋ " />
3
+ <Badge type =" info " text =" ๅ้ๅบฆ " />
5
4
</div >
6
5
7
- ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ํ๋ค ๋ณด๋ฉด Form์ผ๋ก ์ฌ์ฉ์์๊ฒ ๊ฐ์ ์
๋ ฅ๋ฐ์์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์์.
8
- Form์ ๊ด๋ฆฌํ ๋๋ 2๊ฐ์ง์ ๋ฐฉ๋ฒ์ผ๋ก ์์ง๋๋ฅผ ๊ด๋ฆฌํด์, ํจ๊ป ์์ ๋์ด์ผ ํ ์ฝ๋๊ฐ ํจ๊ป ์์ ๋๋๋ก ํ ์ ์์ด์.
6
+ ใใญใณใใจใณใ้็บใใใฆใใใจใใฆใผใถใผใใๅคใๅ
ฅๅใใฆใใใใใใซใใฉใผใ ใไฝฟ็จใใใใจใใใใใใพใใ
7
+ ใใฉใผใ ใ็ฎก็ใใ้ใซใฏใ2ใคใฎๆนๆณใงๅ้ๅบฆใไฟใกใไธ็ทใซไฟฎๆญฃใในใใณใผใใๅๆใซไฟฎๆญฃใใใใใใซใใใใจใใงใใพใใ
9
8
10
- ## ํ๋ ๋จ์ ์์ง๋
9
+ ## ใใฃใผใซใๅไฝใฎๅ้ๅบฆ
11
10
12
- ํ๋ ๋จ์ ์์ง์ ๊ฐ๋ณ ์
๋ ฅ ์์๋ฅผ ๋
๋ฆฝ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ์์ด์์.
13
- ๊ฐ ํ๋๊ฐ ๊ณ ์ ์ ๊ฒ์ฆ ๋ก์ง์ ๊ฐ์ง๋ฏ๋ก ๋ณ๊ฒฝ์ด ํ์ํ ๋ฒ์๊ฐ ์ค์ด๋ค์ด ํน์ ํ๋์ ์ ์ง๋ณด์๊ฐ ์ฌ์์ ธ์.
14
- ํ๋ ๋จ์์ ์์ง๋๋ฅผ ๊ณ ๋ คํ์ฌ ์ค๊ณํ๋ฉด, ๊ฐ ํ๋์ ๊ฒ์ฆ ๋ก์ง์ด ๋
๋ฆฝ์ ์ด์ด์ ๋ค๋ฅธ ํ๋์ ์ํฅ์ ์ฃผ์ง ์์์.
11
+ ใใฃใผใซใๅไฝใฎๅ้ๅบฆใฏใๅๅฅใฎๅ
ฅๅ่ฆ็ด ใ็ฌ็ซใใฆ็ฎก็ใใๆนๆณใงใใ
12
+ ๅใใฃใผใซใใ็ฌ่ชใฎๆค่จผใญใธใใฏใๆใคใใใๅคๆดใๅฟ
่ฆใช็ฏๅฒใ็ธฎๅฐใใใ็นๅฎใฎใใฃใผใซใใฎใกใณใใใณในใๅฎนๆใซใชใใพใใ
13
+ ใใฃใผใซใๅไฝใฎๅ้ๅบฆใ่ๆ
ฎใใฆ่จญ่จใใใจใๅใใฃใผใซใใฎๆค่จผใญใธใใฏใ็ฌ็ซใใฆใใใใใไปใฎใใฃใผใซใใซๅฝฑ้ฟใไธใใใใจใใใใพใใใ
15
14
16
15
``` tsx
17
16
import { useForm } from " react-hook-form" ;
@@ -29,7 +28,7 @@ export function Form() {
29
28
});
30
29
31
30
const onSubmit = handleSubmit ((formData ) => {
32
- // ํผ ๋ฐ์ดํฐ ์ ์ถ ๋ก์ง
31
+ // ใใฉใผใ ใใผใฟใ้ไฟกใใใญใธใใฏ
33
32
console .log (" Form submitted:" , formData );
34
33
});
35
34
@@ -39,9 +38,9 @@ export function Form() {
39
38
<input
40
39
{ ... register (" name" , {
41
40
validate : (value ) =>
42
- isEmptyStringOrNil (value ) ? " ์ด๋ฆ์ ์
๋ ฅํด์ฃผ์ธ์. " : " "
41
+ isEmptyStringOrNil (value ) ? " ๅๅใๅ
ฅๅใใฆใใ ใใใ " : " "
43
42
})}
44
- placeholder = " ์ด๋ฆ "
43
+ placeholder = " ๅๅ "
45
44
/>
46
45
{ errors .name && <p >{ errors .name .message } </p >}
47
46
</div >
@@ -51,22 +50,22 @@ export function Form() {
51
50
{ ... register (" email" , {
52
51
validate : (value ) => {
53
52
if (isEmptyStringOrNil (value )) {
54
- return " ์ด๋ฉ์ผ์ ์
๋ ฅํด์ฃผ์ธ์. " ;
53
+ return " ใกใผใซใขใใฌในใๅ
ฅๅใใฆใใ ใใใ " ;
55
54
}
56
55
57
56
if (! / ^ [A-Z0-9 . _%+-] + @[A-Z0-9 . -] + \. [A-Z ] {2,} $ / i .test (value )) {
58
- return " ์ ํจํ ์ด๋ฉ์ผ ์ฃผ์๋ฅผ ์
๋ ฅํด์ฃผ์ธ์. " ;
57
+ return " ๆญฃใใใกใผใซใขใใฌในใๅ
ฅๅใใฆใใ ใใใ " ;
59
58
}
60
59
61
60
return " " ;
62
61
}
63
62
})}
64
- placeholder = " ์ด๋ฉ์ผ "
63
+ placeholder = " ใกใผใซใขใใฌใน "
65
64
/>
66
65
{ errors .email && <p >{ errors .email .message } </p >}
67
66
</div >
68
67
69
- <button type = " submit" >์ ์ถ </button >
68
+ <button type = " submit" >้ไฟก </button >
70
69
</form >
71
70
);
72
71
}
@@ -82,23 +81,23 @@ function isEmptyStringOrNil(value: NullableString): boolean {
82
81
}
83
82
```
84
83
85
- ## ํผ ์ ์ฒด ๋จ์ ์์ง๋
84
+ ## ใใฉใผใ ๅ
จไฝใฎๅ้ๅบฆ
86
85
87
- ํผ ์ ์ฒด ์์ง์ ๋ชจ๋ ํ๋์ ๊ฒ์ฆ ๋ก์ง์ด ํผ์ ์ข
์๋๋ ๋ฐฉ์์ด์์. ํผ ์ ์ฒด์์์ ํ๋ฆ์ ๊ณ ๋ คํ์ฌ ์ค๊ณ๋๋ฉฐ, ๋ณ๊ฒฝ ๋จ์๊ฐ ํผ ๋จ์๋ก ๋ฐ์ํ ๋ ๊ณ ๋ คํด์.
86
+ ใใฉใผใ ๅ
จไฝใฎๅ้ๅบฆใจใฏใใในใฆใฎใใฃใผใซใใฎๆค่จผใญใธใใฏใใใฉใผใ ใซไพๅญใใ่จญ่จใฎใใจใงใใใใฎ่จญ่จใฏใใใฉใผใ ๅ
จไฝใฎๆตใใ่ๆ
ฎใใฆ่กใใใๅคๆดใใใฉใผใ ๅไฝใง็บ็ใใๅ ดๅใซ็นใซ้่ฆใงใใ
88
87
89
- ํผ ์ ์ฒด ์์ง๋๋ฅผ ๋์ด๋ฉด, ํผ ์ ์ฒด์ ๊ฒ์ฆ์ด ํ ๊ณณ์์ ๊ด๋ฆฌ๋์ด ๋ก์ง์ด ๊ฐ๊ฒฐํด์ง๊ณ , ์ํ๊ฐ ์ค์ ์ง์ค์์ผ๋ก ๊ด๋ฆฌ๋๋ฏ๋ก ํผ ์ ์ฒด ํ๋ฆ์ ์ดํดํ๊ธฐ ์ฌ์์ ธ์. ํ๋ ๊ฐ์ ๊ฒฐํฉ๋๊ฐ ๋์์ง๋ฏ๋ก ํผ์ ์ฌ์ฌ์ฉ์ฑ์ ๋จ์ด์ง ์ ์์ด์.
88
+ ใใฉใผใ ๅ
จไฝใฎๅ้ๅบฆใ้ซใใใจใๆค่จผใไธ็ฎๆใง็ฎก็ใใใใใใใญใธใใฏใใทใณใใซใซใชใใ็ถๆ
ใไธญๅคฎใง็ฎก็ใงใใใใใซใชใใพใใใใใซใใใใใฉใผใ ๅ
จไฝใฎๆตใใๆๆกใใใใใชใใพใใใใใใใใฃใผใซใ้ใฎ็ตๅๅบฆใ้ซใพใใใใใใฉใผใ ใฎๅๅฉ็จๆงใไธใใๅฏ่ฝๆงใใใใพใใ
90
89
91
90
``` tsx
92
91
import * as z from " zod" ;
93
92
import { useForm } from " react-hook-form" ;
94
93
import { zodResolver } from " @hookform/resolvers/zod" ;
95
94
96
95
const schema = z .object ({
97
- name: z .string ().min (1 , " ์ด๋ฆ์ ์
๋ ฅํด์ฃผ์ธ์. " ),
96
+ name: z .string ().min (1 , " ๅๅใๅ
ฅๅใใฆใใ ใใใ " ),
98
97
email: z
99
98
.string ()
100
- .min (1 , " ์ด๋ฉ์ผ์ ์
๋ ฅํด์ฃผ์ธ์. " )
101
- .email (" ์ ํจํ ์ด๋ฉ์ผ ์ฃผ์๋ฅผ ์
๋ ฅํด์ฃผ์ธ์ " )
99
+ .min (1 , " ใกใผใซใขใใฌในใๅ
ฅๅใใฆใใ ใใใ " )
100
+ .email (" ๆญฃใใใกใผใซใขใใฌในใๅ
ฅๅใใฆใใ ใใใ " )
102
101
});
103
102
104
103
export function Form() {
@@ -115,42 +114,42 @@ export function Form() {
115
114
});
116
115
117
116
const onSubmit = handleSubmit ((formData ) => {
118
- // ํผ ๋ฐ์ดํฐ ์ ์ถ ๋ก์ง
117
+ // ใใฉใผใ ใใผใฟใ้ไฟกใใใญใธใใฏ
119
118
console .log (" Form submitted:" , formData );
120
119
});
121
120
122
121
return (
123
122
<form onSubmit = { onSubmit } >
124
123
<div >
125
- <input { ... register (" name" )} placeholder = " ์ด๋ฆ " />
124
+ <input { ... register (" name" )} placeholder = " ๅๅ " />
126
125
{ errors .name && <p >{ errors .name .message } </p >}
127
126
</div >
128
127
129
128
<div >
130
- <input { ... register (" email" )} placeholder = " ์ด๋ฉ์ผ " />
129
+ <input { ... register (" email" )} placeholder = " ใกใผใซใขใใฌใน " />
131
130
{ errors .email && <p >{ errors .email .message } </p >}
132
131
</div >
133
132
134
- <button type = " submit" >์ ์ถ </button >
133
+ <button type = " submit" >้ไฟก </button >
135
134
</form >
136
135
);
137
136
}
138
137
```
139
138
140
- ## ํ๋ ๋จ์ vs. ํผ ์ ์ฒด ๋จ์ ์์ง๋
139
+ ## ใใฃใผใซใๅไฝ vs. ใใฉใผใ ๅ
จไฝใฎๅ้ๅบฆ
141
140
142
- ์์ง๋๋ฅผ ๋์ด๋ ค๋ฉด ํ๋ ๋จ์์ ํผ ์ ์ฒด ๋จ์ ์ค ์ํฉ์ ์ ํฉํ ๋ฐฉ์์ ์ ํํด์ผ ํด์.
143
- ํ๋ ๋จ์๋ก ๋๋๋ฉด ์ฌ์ฌ์ฉ์ฑ๊ณผ ๋
๋ฆฝ์ฑ์ด ๋์์ง์ง๋ง, ํผ ์ ์ฒด ๋จ์๋ก ๊ด๋ฆฌํ๋ฉด ์ผ๊ด๋ ํ๋ฆ์ ์ ์งํ ์ ์์ด์.
141
+ ๅ้ๅบฆใ้ซใใใใใซใฏใใใฃใผใซใๅไฝใจใใฉใผใ ๅ
จไฝๅไฝใฎใฉใกใใ็ถๆณใซ้ฉใใฆใใใใ้ธใถใใจใๅคงๅใงใใ
142
+ ใใฃใผใซใๅไฝใงๅใใใจๅๅฉ็จๆงใจ็ฌ็ซๆงใ้ซใพใใพใใใใใฉใผใ ๅ
จไฝๅไฝใง็ฎก็ใใใใจใงไธ่ฒซใใๆตใใไฟใคใใจใใงใใพใใ
144
143
145
- ๋ณ๊ฒฝ์ ๋จ์๊ฐ ํ๋ ๋จ์์ธ์ง ํผ ์ ์ฒด ๋จ์์ธ์ง์ ๋ฐ๋ผ ์ค๊ณ๋ฅผ ์กฐ์ ํด์ผ ํด์.
144
+ ๅคๆดๅไฝใใใฃใผใซใๅไฝใใใฉใผใ ๅ
จไฝๅไฝใใซใใฃใฆใ่จญ่จใ่ชฟๆดใใๅฟ
่ฆใใใใพใใ
146
145
147
- ### ํ๋ ๋จ์ ์์ง๋๋ฅผ ์ ํํ๋ฉด ์ข์ ๋
146
+ ### ใใฃใผใซใๅไฝใฎๅ้ๅบฆใ้ธใถในใๆ
148
147
149
- - ** ๋
๋ฆฝ์ ์ธ ๊ฒ์ฆ์ด ํ์ํ ๋ ** : ํ๋๋ณ๋ก ๋ณต์กํ ๊ฒ์ฆ ๋ก์ง์ด ํ์ํ๊ฑฐ๋ ๋น๋๊ธฐ ๊ฒ์ฆ์ด ํ์ํ ๊ฒฝ์ฐ์์. ์ด๋ฉ์ผ ํ์ ๊ฒ์ฌ, ์ ํ๋ฒํธ ์ ํจ์ฑ ๊ฒ์ฆ, ์์ด๋ ์ค๋ณต ํ์ธ, ์ถ์ฒ ์ฝ๋ ์ ํจ์ฑ ํ์ธ์ฒ๋ผ ๊ฐ ํ๋๊ฐ ๋
๋ฆฝ์ ์ด๊ณ ๊ณ ์ ํ ๊ฒ์ฆ์ด ํ์ํ ๋ ์ ์ฉํด์.
150
- - ** ์ฌ์ฌ์ฉ์ด ํ์ํ ๋ ** : ํ๋์ ๊ฒ์ฆ ๋ก์ง์ด ๋ค๋ฅธ ํผ์์๋ ๋์ผํ๊ฒ ์ฌ์ฉ๋ ์ ์๋ ๊ฒฝ์ฐ์์. ๊ณตํต ์
๋ ฅ ํ๋๋ค์ ๋
๋ฆฝ์ ์ผ๋ก ๊ด๋ฆฌํ๊ณ ์ฌ์ฌ์ฉํ๊ณ ์ถ์ ๋ ์ข์์.
148
+ - ** ็ฌ็ซใใๆค่จผใๅฟ
่ฆใชๅ ดๅ ** : ใใฃใผใซใใใจใซ่ค้ใชๆค่จผใญใธใใฏใ้ๅๆๆค่จผใๅฟ
่ฆใชๅ ดๅใซ้ฉใใฆใใพใใใกใผใซใขใใฌในใฎๅฝขๅผใใงใใฏใ้ป่ฉฑ็ชๅทใฎๆๅนๆง็ขบ่ชใIDใฎ้่คใใงใใฏใๆจ่ฆใณใผใใฎๆๅนๆง็ขบ่ชใชใฉใๅใใฃใผใซใใ็ฌ็ซใใฆใใใใใฎๆค่จผใ่กใๅฟ
่ฆใใใใจใใซไพฟๅฉใงใใ
149
+ - ** ๅๅฉ็จใๅฟ
่ฆใชๅ ดๅ ** : ํ๋์ ๊ฒ์ฆ ๋ก์ง์ด ๋ค๋ฅธ ํผ์์๋ ๋์ผํ๊ฒ ์ฌ์ฉ๋ ์ ์๋ ๊ฒฝ์ฐ์์. ๊ณตํต ์
๋ ฅ ํ๋๋ค์ ๋
๋ฆฝ์ ์ผ๋ก ๊ด๋ฆฌํ๊ณ ์ฌ์ฌ์ฉํ๊ณ ์ถ์ ๋ ์ข์์.
151
150
152
- ### ํผ ์ ์ฒด ๋จ์ ์์ง๋๋ฅผ ์ ํํ๋ฉด ์ข์ ๋
151
+ ### ใใฉใผใ ๅ
จไฝๅไฝใฎๅ้ๅบฆใ้ธใถในใๆ
153
152
154
- - ** ๋จ์ผ ๊ธฐ๋ฅ์ ๋ํ๋ผ ๋ ** : ๋ชจ๋ ํ๋๊ฐ ๋ฐ์ ํ๊ฒ ๊ด๋ จ๋์ด ํ๋์ ์๊ฒฐ๋ ๊ธฐ๋ฅ์ ๊ตฌ์ฑํ๋ ๊ฒฝ์ฐ์์. ๊ฒฐ์ ์ ๋ณด๋ ๋ฐฐ์ก ์ ๋ณด์ฒ๋ผ ๋ชจ๋ ํ๋๊ฐ ํ๋์ ๋น์ฆ๋์ค ๋ก์ง์ ์ด๋ฃฐ ๋ ์ ์ฉํด์.
155
- - ** ๋จ๊ณ๋ณ ์
๋ ฅ์ด ํ์ํ ๋ ** : Wizard Form๊ณผ ๊ฐ์ด ์คํ
๋ณ๋ก ๋์ํ๋ ๋ณต์กํ ํผ์ ๊ฒฝ์ฐ์์. ํ์๊ฐ์
์ด๋ ์ค๋ฌธ์กฐ์ฌ์ฒ๋ผ ์ด์ ๋จ๊ณ์ ์
๋ ฅ๊ฐ์ด ๋ค์ ๋จ๊ณ์ ์ํฅ์ ์ฃผ๋ ๊ฒฝ์ฐ์ ์ ํฉํด์.
156
- - ** ํ๋ ๊ฐ ์์กด์ฑ์ด ์์ ๋ ** : ์ฌ๋ฌ ํ๋๊ฐ ์๋ก๋ฅผ ์ฐธ์กฐํ๊ฑฐ๋ ์ํฅ์ ์ฃผ๋ ๊ฒฝ์ฐ์์. ๋น๋ฐ๋ฒํธ ํ์ธ์ด๋ ์ด์ก ๊ณ์ฐ์ฒ๋ผ ํ๋ ๊ฐ ์ํธ์์ฉ์ด ํ์ํ ๋ ์ข์์.
153
+ - ** ๅไธๆฉ่ฝใ็คบใๅ ดๅ ** : ใในใฆใฎใใฃใผใซใใๅฏๆฅใซ้ข้ฃใใฆใใฒใจใคใฎๅฎ็ตใใๆฉ่ฝใๆงๆใใๆใซๆ็จใงใใๆฑบๆธๆ
ๅ ฑใ้
้ๆ
ๅ ฑใฎใใใซใใในใฆใฎใใฃใผใซใใไธใคใฎใใธใในใญใธใใฏใๅฝขๆใใๅ ดๅใซ้ฉใใฆใใพใใ
154
+ - ** ๆฎต้็ใชๅ
ฅๅใๅฟ
่ฆใชๅ ดๅ ** : ใฆใฃใถใผใใใฉใผใ ใฎใใใซใในใใใใใจใซๅไฝใใ่ค้ใชใใฉใผใ ใซ้ฉใใฆใใพใใไผๅก็ป้ฒใใขใณใฑใผใใฎใใใซใๅใฎในใใใใฎๅ
ฅๅใๆฌกใฎในใใใใซๅฝฑ้ฟใไธใใๅ ดๅใซ้ฉใใฆใใพใใ
155
+ - ** ใใฃใผใซใ้ใฎไพๅญๆงใใใๅ ดๅ ** : ่คๆฐใฎใใฃใผใซใใไบใใซๅ็
งใใใๅฝฑ้ฟใไธใใใใใๅ ดๅใซ้ฉใใฆใใพใใใในใฏใผใ็ขบ่ชใๅ่จ่จ็ฎใฎใใใซใใใฃใผใซใ้ใฎ็ธไบไฝ็จใๅฟ
่ฆใชๅ ดๅใซไพฟๅฉใงใใ
0 commit comments