You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/forms.md
+9-9Lines changed: 9 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ redirect_from:
9
9
- "docs/forms-zh-CN.html"
10
10
---
11
11
12
-
HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 조금 다르게 동작합니다. 예를 들어, 순수한 HTML에서 이 폼은 name을 입력받습니다.
12
+
HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 조금 다르게 동작합니다. 예를 들어, 순수한 HTML에서 이 폼은 name을 입력받습니다.
13
13
14
14
```html
15
15
<form>
@@ -68,7 +68,7 @@ class NameForm extends React.Component {
68
68
69
69
`value` 어트리뷰트는 폼 엘리먼트에 설정되므로 표시되는 값은 항상 `this.state.value`가 되고 React state는 신뢰 가능한 단일 출처 (single source of truth)가 됩니다. React state를 업데이트하기 위해 모든 키 입력에서 `handleChange`가 동작하기 때문에 사용자가 입력할 때 보여지는 값이 업데이트됩니다.
70
70
71
-
제어 컴포넌트로 사용하면 모든 state 변화는 연관된 핸들러를 가집니다. 이것을 통해 사용자 입력을 수정하거나 유효성을 검사하는 것이 간단해집니다. 예를 들어, 이름이 모두 대문자로 쓰여지게 하고 싶다면 `handleChange`를 다음과 같이 사용할 수 있습니다.
71
+
제어 컴포넌트로 사용하면 모든 state 변화는 연관된 핸들러를 가집니다. 이것을 통해 사용자 입력을 수정하거나 유효성을 검사하는 것이 간단해집니다. 예를 들어, 이름이 모두 대문자로 쓰여지게 하고 싶다면 `handleChange`를 다음과 같이 사용할 수 있습니다.
React에서 `<textarea>`는 `value` 어트리뷰트를 대신 사용합니다. 이렇게하면 `<textarea>`를 사용하는 폼은 한 줄 입력을 사용하는 폼과 비슷하게 작성할 수 있습니다.
89
+
React에서 `<textarea>`는 `value` 어트리뷰트를 대신 사용합니다. 이렇게하면 `<textarea>`를 사용하는 폼은 한 줄 입력을 사용하는 폼과 비슷하게 작성할 수 있습니다.
90
90
91
91
```javascript{4-6,12-14,26}
92
92
class EssayForm extends React.Component {
@@ -127,7 +127,7 @@ class EssayForm extends React.Component {
127
127
128
128
## select 태그 {#the-select-tag}
129
129
130
-
HTML에서 `<select>`는 드롭 다운 목록을 만듭니다. 예를 들어, 이 HTML은 과일 드롭 다운 목록을 만듭니다.
130
+
HTML에서 `<select>`는 드롭 다운 목록을 만듭니다. 예를 들어, 이 HTML은 과일 드롭 다운 목록을 만듭니다.
131
131
132
132
```html
133
133
<select>
@@ -138,7 +138,7 @@ HTML에서 `<select>`는 드롭 다운 목록을 만듭니다. 예를 들어,
138
138
</select>
139
139
```
140
140
141
-
`selected` 옵션이 있으므로 Coconut 옵션이 초기값이 되는 점을 주의해주세요. React에서는 `selected` 어트리뷰트를 사용하는 대신 최상단 `select`태그에 `value` 어트리뷰트를 사용합니다. 한 곳에서 업데이트만 하면되기 때문에 제어 컴포넌트에서 사용하기 더 편합니다. 아래는 예시입니다.
141
+
`selected` 옵션이 있으므로 Coconut 옵션이 초기값이 되는 점을 주의해주세요. React에서는 `selected` 어트리뷰트를 사용하는 대신 최상단 `select`태그에 `value` 어트리뷰트를 사용합니다. 한 곳에서 업데이트만 하면되기 때문에 제어 컴포넌트에서 사용하기 더 편합니다. 아래는 예시입니다.
142
142
143
143
```javascript{4,10-12,24}
144
144
class FlavorForm extends React.Component {
@@ -180,7 +180,7 @@ class FlavorForm extends React.Component {
전반적으로 `<input type="text">`, `<textarea>` 및 `<select>` 모두 매우 비슷하게 동작합니다. 모두 제어 컴포넌트를 구현하는데 `value` 어트리뷰트를 허용합니다.
183
+
전반적으로 `<input type="text">`, `<textarea>` 및 `<select>` 모두 매우 비슷하게 동작합니다. 모두 제어 컴포넌트를 구현하는데 `value` 어트리뷰트를 허용합니다.
184
184
185
185
> 주의
186
186
>
@@ -198,11 +198,11 @@ HTML에서 `<input type="file">`는 사용자가 하나 이상의 파일을 자
198
198
<input type="file"/>
199
199
```
200
200
201
-
값이 읽기 전용이기 때문에 React에서는 **비제어** 컴포넌트입니다. [문서 뒷부분](/docs/uncontrolled-components.html#the-file-input-tag)에서 다른 비제어 컴포넌트와 함께 설명하고 있습니다.
201
+
값이 읽기 전용이기 때문에 React에서는 **비제어** 컴포넌트입니다. [문서 뒷부분](/docs/uncontrolled-components.html#the-file-input-tag)에서 다른 비제어 컴포넌트와 함께 설명하고 있습니다.
202
202
203
203
## 다중 입력 제어하기 {#handling-multiple-inputs}
204
204
205
-
여러 `input` 엘리먼트를 제어해야할 때, 각 엘리먼트에 `name` 어트리뷰트를 추가하고 `event.target.name` 값을 통해 핸들러가 어떤 작업을 할 지 선택할 수 있게 해줍니다.
205
+
여러 `input` 엘리먼트를 제어해야할 때, 각 엘리먼트에 `name` 어트리뷰트를 추가하고 `event.target.name` 값을 통해 핸들러가 어떤 작업을 할 지 선택할 수 있게 해줍니다.
206
206
207
207
아래는 예시입니다.
208
208
@@ -295,4 +295,4 @@ setTimeout(function() {
295
295
296
296
## 완전한 해결책 {#fully-fledged-solutions}
297
297
298
-
유효성 검사, 방문한 필드 추적 및 폼 제출 처리와 같은 완벽한 해결을 원한다면 [Formik](https://jaredpalmer.com/formik)이 대중적인 선택 중 하나입니다. 그러나 Formik은 제어 컴포넌트 및 state 관리에 기초하기 때문에 배우는 걸 쉽게 생각하면 안 됩니다.
298
+
유효성 검사, 방문한 필드 추적 및 폼 제출 처리와 같은 완벽한 해결을 원한다면 [Formik](https://jaredpalmer.com/formik)이 대중적인 선택 중 하나입니다. 그러나 Formik은 제어 컴포넌트 및 state 관리에 기초하기 때문에 배우는 걸 쉽게 생각하면 안 됩니다.
0 commit comments