Skip to content

Commit 09a333e

Browse files
committed
fix: remove blank
1 parent 10a1e08 commit 09a333e

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

content/docs/forms.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ redirect_from:
99
- "docs/forms-zh-CN.html"
1010
---
1111

12-
HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 조금 다르게 동작합니다. 예를 들어, 순수한 HTML에서 이 폼은 name을 입력받습니다.
12+
HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 조금 다르게 동작합니다. 예를 들어, 순수한 HTML에서 이 폼은 name을 입력받습니다.
1313

1414
```html
1515
<form>
@@ -68,7 +68,7 @@ class NameForm extends React.Component {
6868

6969
`value` 어트리뷰트는 폼 엘리먼트에 설정되므로 표시되는 값은 항상 `this.state.value`가 되고 React state는 신뢰 가능한 단일 출처 (single source of truth)가 됩니다. React state를 업데이트하기 위해 모든 키 입력에서 `handleChange`가 동작하기 때문에 사용자가 입력할 때 보여지는 값이 업데이트됩니다.
7070

71-
제어 컴포넌트로 사용하면 모든 state 변화는 연관된 핸들러를 가집니다. 이것을 통해 사용자 입력을 수정하거나 유효성을 검사하는 것이 간단해집니다. 예를 들어, 이름이 모두 대문자로 쓰여지게 하고 싶다면 `handleChange`를 다음과 같이 사용할 수 있습니다.
71+
제어 컴포넌트로 사용하면 모든 state 변화는 연관된 핸들러를 가집니다. 이것을 통해 사용자 입력을 수정하거나 유효성을 검사하는 것이 간단해집니다. 예를 들어, 이름이 모두 대문자로 쓰여지게 하고 싶다면 `handleChange`를 다음과 같이 사용할 수 있습니다.
7272

7373
```javascript{2}
7474
handleChange(event) {
@@ -86,7 +86,7 @@ HTML에서 `<textarea>` 엘리먼트는 텍스트를 자식으로 정의합니
8686
</textarea>
8787
```
8888

89-
React에서 `<textarea>``value` 어트리뷰트를 대신 사용합니다. 이렇게하면 `<textarea>`를 사용하는 폼은 한 줄 입력을 사용하는 폼과 비슷하게 작성할 수 있습니다.
89+
React에서 `<textarea>``value` 어트리뷰트를 대신 사용합니다. 이렇게하면 `<textarea>`를 사용하는 폼은 한 줄 입력을 사용하는 폼과 비슷하게 작성할 수 있습니다.
9090

9191
```javascript{4-6,12-14,26}
9292
class EssayForm extends React.Component {
@@ -127,7 +127,7 @@ class EssayForm extends React.Component {
127127

128128
## select 태그 {#the-select-tag}
129129

130-
HTML에서 `<select>`는 드롭 다운 목록을 만듭니다. 예를 들어, 이 HTML은 과일 드롭 다운 목록을 만듭니다.
130+
HTML에서 `<select>`는 드롭 다운 목록을 만듭니다. 예를 들어, 이 HTML은 과일 드롭 다운 목록을 만듭니다.
131131

132132
```html
133133
<select>
@@ -138,7 +138,7 @@ HTML에서 `<select>`는 드롭 다운 목록을 만듭니다. 예를 들어,
138138
</select>
139139
```
140140

141-
`selected` 옵션이 있으므로 Coconut 옵션이 초기값이 되는 점을 주의해주세요. React에서는 `selected` 어트리뷰트를 사용하는 대신 최상단 `select`태그에 `value` 어트리뷰트를 사용합니다. 한 곳에서 업데이트만 하면되기 때문에 제어 컴포넌트에서 사용하기 더 편합니다. 아래는 예시입니다.
141+
`selected` 옵션이 있으므로 Coconut 옵션이 초기값이 되는 점을 주의해주세요. React에서는 `selected` 어트리뷰트를 사용하는 대신 최상단 `select`태그에 `value` 어트리뷰트를 사용합니다. 한 곳에서 업데이트만 하면되기 때문에 제어 컴포넌트에서 사용하기 더 편합니다. 아래는 예시입니다.
142142

143143
```javascript{4,10-12,24}
144144
class FlavorForm extends React.Component {
@@ -180,7 +180,7 @@ class FlavorForm extends React.Component {
180180

181181
[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
182182

183-
전반적으로 `<input type="text">`, `<textarea>``<select>` 모두 매우 비슷하게 동작합니다. 모두 제어 컴포넌트를 구현하는데 `value` 어트리뷰트를 허용합니다.
183+
전반적으로 `<input type="text">`, `<textarea>``<select>` 모두 매우 비슷하게 동작합니다. 모두 제어 컴포넌트를 구현하는데 `value` 어트리뷰트를 허용합니다.
184184

185185
> 주의
186186
>
@@ -198,11 +198,11 @@ HTML에서 `<input type="file">`는 사용자가 하나 이상의 파일을 자
198198
<input type="file" />
199199
```
200200
201-
값이 읽기 전용이기 때문에 React에서는 **비제어** 컴포넌트입니다. [문서 뒷부분](/docs/uncontrolled-components.html#the-file-input-tag)에서 다른 비제어 컴포넌트와 함께 설명하고 있습니다.
201+
값이 읽기 전용이기 때문에 React에서는 **비제어** 컴포넌트입니다. [문서 뒷부분](/docs/uncontrolled-components.html#the-file-input-tag)에서 다른 비제어 컴포넌트와 함께 설명하고 있습니다.
202202

203203
## 다중 입력 제어하기 {#handling-multiple-inputs}
204204

205-
여러 `input` 엘리먼트를 제어해야할 때, 각 엘리먼트에 `name` 어트리뷰트를 추가하고 `event.target.name` 값을 통해 핸들러가 어떤 작업을 할 지 선택할 수 있게 해줍니다.
205+
여러 `input` 엘리먼트를 제어해야할 때, 각 엘리먼트에 `name` 어트리뷰트를 추가하고 `event.target.name` 값을 통해 핸들러가 어떤 작업을 할 지 선택할 수 있게 해줍니다.
206206

207207
아래는 예시입니다.
208208

@@ -295,4 +295,4 @@ setTimeout(function() {
295295

296296
## 완전한 해결책 {#fully-fledged-solutions}
297297

298-
유효성 검사, 방문한 필드 추적 및 폼 제출 처리와 같은 완벽한 해결을 원한다면 [Formik](https://jaredpalmer.com/formik)이 대중적인 선택 중 하나입니다. 그러나 Formik은 제어 컴포넌트 및 state 관리에 기초하기 때문에 배우는 걸 쉽게 생각하면 안 됩니다.
298+
유효성 검사, 방문한 필드 추적 및 폼 제출 처리와 같은 완벽한 해결을 원한다면 [Formik](https://jaredpalmer.com/formik)이 대중적인 선택 중 하나입니다. 그러나 Formik은 제어 컴포넌트 및 state 관리에 기초하기 때문에 배우는 걸 쉽게 생각하면 안 됩니다.

0 commit comments

Comments
 (0)