@@ -4,12 +4,12 @@ title: "<form>"
4
4
5
5
<Intro >
6
6
7
- [ 내장 브라우저 ` <form> ` 컴포넌트] ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form ) 는 정보 제출을 위한 대화형 컨트롤을 만들 수 있습니다.
7
+ [ 내장 브라우저 ` <form> ` 컴포넌트] ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form ) 로 정보 제출을 위한 대화형 컨트롤을 만들 수 있습니다.
8
8
9
9
``` js
10
10
< form action= {search}>
11
11
< input name= " query" / >
12
- < button type= " submit" > Search < / button>
12
+ < button type= " submit" > 검색 < / button>
13
13
< / form>
14
14
```
15
15
@@ -28,7 +28,7 @@ title: "<form>"
28
28
``` js
29
29
< form action= {search}>
30
30
< input name= " query" / >
31
- < button type= " submit" > Search < / button>
31
+ < button type= " submit" > 검색 < / button>
32
32
< / form>
33
33
```
34
34
@@ -58,12 +58,12 @@ title: "<form>"
58
58
export default function Search () {
59
59
function search (formData ) {
60
60
const query = formData .get (" query" );
61
- alert (` You searched for '${ query} '` );
61
+ alert (` '${ query} '을(를) 검색했습니다. ` );
62
62
}
63
63
return (
64
64
< form action= {search}>
65
65
< input name= " query" / >
66
- < button type= " submit" > Search < / button>
66
+ < button type= " submit" > 검색 < / button>
67
67
< / form>
68
68
);
69
69
}
@@ -92,7 +92,7 @@ function AddToCart({productId}) {
92
92
return (
93
93
< form action= {addToCart}>
94
94
< input type= " hidden" name= " productId" value= {productId} / >
95
- < button type= " submit" > Add to Cart < / button>
95
+ < button type= " submit" > 장바구니에 추가 < / button>
96
96
< / form>
97
97
);
98
98
}
@@ -111,7 +111,7 @@ function AddToCart({productId}) {
111
111
const addProductToCart = addToCart .bind (null , productId);
112
112
return (
113
113
< form action= {addProductToCart}>
114
- < button type= " submit" > Add to Cart < / button>
114
+ < button type= " submit" > 장바구니에 추가 < / button>
115
115
< / form>
116
116
);
117
117
}
@@ -135,7 +135,7 @@ function Submit() {
135
135
const { pending } = useFormStatus ();
136
136
return (
137
137
< button type= " submit" disabled= {pending}>
138
- {pending ? " Submitting ..." : " Submit " }
138
+ {pending ? " 제출중 ..." : " 제출 " }
139
139
< / button>
140
140
);
141
141
}
@@ -167,7 +167,7 @@ export async function submitForm(query) {
167
167
168
168
` useOptimistic ` Hook은 네트워크 요청과 같은 백그라운드의 작업이 끝나기 전에 사용자 인터페이스에 낙관적으로 업데이트하는 방법을 제공합니다. 폼의 맥락에서 이 기술은 앱을 더욱 반응형으로 느끼게 해줍니다. 사용자가 폼을 제출하면 인터페이스는 사용자가 기대하는 결과물로 즉시 업데이트됩니다.
169
169
170
- 예를 들어, 사용자가 폼에 메시지를 입력하고 "제출 " 버튼을 클릭하면 ` useOptimistic ` Hook은 "제출중 ..." 라벨과 함께 메시지가 서버에 보내지기 전에 리스트에 즉시 보입니다. 이러한 '낙관적인' 접근 방식은 속도와 반응성이 뛰어나다는 인상을 줍니다. 그다음 폼은 실제로 백그라운드에 메시지 보내기를 시도합니다. 서버에 메시지가 잘 도착하면, "제출중 ..." 라벨은 사라집니다.
170
+ 예를 들어, 사용자가 폼에 메시지를 입력하고 "전송 " 버튼을 클릭하면 ` useOptimistic ` Hook은 "전송중 ..." 라벨과 함께 메시지가 서버에 보내지기 전에 리스트에 즉시 보입니다. 이러한 '낙관적인' 접근 방식은 속도와 반응성이 뛰어나다는 인상을 줍니다. 그다음 폼은 실제로 백그라운드에 메시지 보내기를 시도합니다. 서버에 메시지가 잘 도착하면, "전송중 ..." 라벨은 사라집니다.
171
171
172
172
173
173
<Sandpack >
@@ -200,12 +200,12 @@ function Thread({ messages, sendMessage }) {
200
200
{optimisticMessages .map ((message , index ) => (
201
201
< div key= {index}>
202
202
{message .text }
203
- {!! message .sending && < small> (Sending ... )< / small> }
203
+ {!! message .sending && < small> (전송중 ... )< / small> }
204
204
< / div>
205
205
))}
206
206
< form action= {formAction} ref= {formRef}>
207
207
< input type= " text" name= " message" placeholder= " Hello!" / >
208
- < button type= " submit" > Send < / button>
208
+ < button type= " submit" > 전송 < / button>
209
209
< / form>
210
210
< / >
211
211
);
@@ -253,7 +253,7 @@ export default function Search() {
253
253
>
254
254
< form action= {search}>
255
255
< input name= " query" / >
256
- < button type= " submit" > Search < / button>
256
+ < button type= " submit" > 검색 < / button>
257
257
< / form>
258
258
< / ErrorBoundary>
259
259
);
@@ -298,20 +298,20 @@ export default function Page() {
298
298
const email = formData .get (" email" );
299
299
try {
300
300
await signUpNewUser (email);
301
- alert (` Added "${ email} "` );
301
+ alert (` "${ email} "을 등록했어요 ` );
302
302
} catch (err) {
303
303
return err .toString ();
304
304
}
305
305
}
306
306
const [message , signupAction ] = useActionState (signup, null );
307
307
return (
308
308
<>
309
- < h1> Signup for my newsletter < / h1>
310
- < p> Signup with the same email twice to see an error < / p>
309
+ < h1> 뉴스레터에 가입하세요 < / h1>
310
+ < p> 같은 이메일로 두 번 가입하여 오류를 확인하세요. < / p>
311
311
< form action= {signupAction} id= " signup-form" >
312
- < label htmlFor= " email" > Email : < / label>
312
+ < label htmlFor= " email" > 이메일 : < / label>
313
313
< input name= " email" id= " email" placeholder= " react@example.com" / >
314
- < button> Sign up < / button>
314
+ < button> 가입하기 < / button>
315
315
{!! message && < p> {message}< / p> }
316
316
< / form>
317
317
< / >
@@ -324,7 +324,7 @@ let emails = [];
324
324
325
325
export async function signUpNewUser (newEmail ) {
326
326
if (emails .includes (newEmail)) {
327
- throw new Error (" This email address has already been added " );
327
+ throw new Error (" 이 이메일 주소는 이미 등록되었습니다. " );
328
328
}
329
329
emails .push (newEmail);
330
330
}
@@ -347,20 +347,20 @@ export default function Search() {
347
347
function publish (formData ) {
348
348
const content = formData .get (" content" );
349
349
const button = formData .get (" button" );
350
- alert (` '${ content } ' was published with the '${ button } ' button ` );
350
+ alert (` '${ button } ' 버튼으로 '${ content } '가 발행되었습니다. ` );
351
351
}
352
352
353
353
function save (formData ) {
354
354
const content = formData .get (" content" );
355
- alert (` Your draft of '${ content} ' has been saved !` );
355
+ alert (` '${ content} ' 초안이 저장되었습니다 !` );
356
356
}
357
357
358
358
return (
359
359
< form action= {publish}>
360
360
< textarea name= " content" rows= {4 } cols= {40 } / >
361
361
< br / >
362
- < button type= " submit" name= " button" value= " submit" > Publish < / button>
363
- < button formAction= {save}> Save draft < / button>
362
+ < button type= " submit" name= " button" value= " submit" > 발행 < / button>
363
+ < button formAction= {save}> 초안 저장 < / button>
364
364
< / form>
365
365
);
366
366
}
0 commit comments