ae4fbff308 · samitouri/QOS-React-2

@@ -0,0 +1,152 @@

1 +---

2 +id: forms-ko-KR

3 +title: 폼

4 +permalink: forms.ko-KR.html

5 +prev: transferring-props.ko-KR.html

6 +next: working-with-the-browser.ko-KR.html

7 +---

8 +

9 +`<input>`, `<textarea>`, `<option>` 같은 폼 컴포넌트는 다른 네이티브 컴포넌트와 다릅니다. 왜냐하면, 사용자의 상호작용에 의해 변경될 수 있기 때문이죠. 이런 컴포넌트들은 사용자의 상호작용에 반응하여 폼을 더 쉽게 관리할 수 있도록 인터페이스를 제공합니다.

10 +

11 +`<form>` 이벤트에 관한 정보는 [폼 이벤트](/react/docs/events.html#form-events)를 보세요.

12 +

13 +## Props의 상호작용

14 +

15 +폼 컴포넌트는 사용자 상호작용을 통해 영향을 받는 몇 가지 props를 지원합니다.

16 +

17 +* `value`: `<input>`, `<textarea>` 컴포넌트에서 사용가능.

18 +* `checked`: `checkbox`, `radio`타입의 `<input>` 컴포넌트에서 사용가능.

19 +* `selected`: `<option>` 컴포넌트에서 사용가능.

20 +

21 +HTML에서는 `<textarea>` 태그의 값을 설정할 때 `<textarea>` 태그의 자식이 사용되지만, React에서는 `value` 를 사용해야 합니다.

22 +

23 +폼 컴포넌트는 `onChange` prop의 콜백을 설정하여 변경을 감시(listening)할 수 있습니다. `onChange` prop는 브라우저에 관계없이 다음과 같은 사용자 상호작용에 반응합니다.

24 +

25 +* `<input>`, `<textarea>`의 `value` 변경.

26 +* `<input>`의 `checked` state 변경.

27 +* `<option>`의 `selected` state 변경.

28 +

29 +모든 DOM 이벤트처럼 `onChange` prop은 모든 네이티브 컴포넌트에서 지원되며 일어난(bubbled) 변경 이벤트를 감시하는데 사용할 수 있습니다.

30 +

31 +

32 +## 제어되는(controlled) 컴포넌트

33 +

34 +`value`가 설정된 `<input>`은 *제어되는* 컴포넌트입니다. 제어되는 `<input>`에서, 렌더 엘리먼트의 값은 항상 `value` prop을 반영합니다. 예를 들어,

35 +

36 +```javascript

37 + render: function() {

38 + return <input type="text" value="Hello!" />;

39 + }

40 +```

41 +

42 +이것은 항상 `Hello!`의 값을 가지는 input을 렌더합니다. 어떤 사용자 입력도 렌더된 엘리멘트에는 영향을 주지 않는데, 왜냐하면 React가 값을 `Hello!`로 설정했기 때문입니다. 사용자 입력에 따라 값을 업데이트하길 원한다면, `onChange` 이벤트를 사용할 수 있습니다.

43 +

44 +```javascript

45 + getInitialState: function() {

46 + return {value: 'Hello!'};

47 + },

48 + handleChange: function(event) {

49 + this.setState({value: event.target.value});

50 + },

51 + render: function() {

52 + var value = this.state.value;

53 + return <input type="text" value={value} onChange={this.handleChange} />;

54 + }

55 +```

56 +

57 +이 예제에서는, 단순히 사용자가 주는 최신값을 받고 `<input>` 컴포넌트의 `value` prop을 업데이트하고 있습니다. 이 패턴은 사용자의 상호작용에 반응하거나 검증하는 인터페이스를 쉽게 구현하게 합니다. 예를 들어,

58 +

59 +```javascript

60 + handleChange: function(event) {

61 + this.setState({value: event.target.value.substr(0, 140)});

62 + }

63 +```

64 +

65 +이것은 사용자 입력을 받아들이지만, 시작에서부터 140자로 값을 자릅니다.

66 +

67 +

68 +## 제어되지 않는(Uncontrolled) 컴포넌트

69 +

70 +`value` 가 없(거나 `null`로 설정되어 있)는 `<input>`은 *제어되지 않는* 컴포넌트입니다. 제어되지 않는 `<input>`에서 렌더된 엘리먼트의 value값은 사용자의 입력을 반영합니다. 예를 들어,

71 +

72 +```javascript

73 + render: function() {

74 + return <input type="text" />;

75 + }

76 +```

77 +

78 +이것은 빈 값으로 시작되는 input을 랜더합니다. 임의의 사용자 입력은 즉시 렌더된 엘리먼트에 반영됩니다. 값의 업데이트를 감시하길 원한다면, 제어되는 컴포넌트처럼 `onChange` 이벤트를 사용할 수 있습니다.

79 +

80 +비어 있지 않은 값으로 초기화하길 원한다면, `defaultValue` prop로 할 수 있습니다. 예를 들어,

81 +

82 +```javascript

83 + render: function() {

84 + return <input type="text" defaultValue="Hello!" />;

85 + }

86 +```

87 +

88 +이 예제는 위에있는 **제어되는 컴포넌트**에 더 가깝게 동작할 것입니다.

89 +

90 +마찬가지로, `<input>`은 `defaultChecked`를 지원하고 `<select>`는 `defaultValue`를 지원합니다.

91 +

92 +

93 +## 심화 주제

94 +

95 +

96 +### 왜 제어되는 컴포넌트인가요?

97 +

98 +React에서 `<input>`같은 폼 컴포넌트를 사용하면, 전통적인 폼 HTML을 쓸 때에는 없던 어려운 문제가 있습니다. 예를 들어 HTML에서

99 +

100 +```html

101 + <input type="text" name="title" value="Untitled" />

102 +```

103 +

104 +이렇게 하면 input은 `Untitled` 값으로 *초기화* 됩니다. 사용자가 input을 업데이트할 때, 노드의 value *프로퍼티*가 변경될 것입니다. 하지만, `node.getAttribute('value')`은 여전히 초기화 때 사용했던 값인 `Untitled`를 리턴합니다.

105 +

106 +HTML과 다르게, React 컴포넌트는 초기화 시점 뿐만 아니라, 어떤 시점이라도 반드시

107 +뷰의 state를 나타내야 합니다. 예를 들어 React에서

108 +

109 +```javascript

110 + render: function() {

111 + return <input type="text" name="title" value="Untitled" />;

112 + }

113 +```

114 +

115 +이 메서드가 어떤 시점에도 뷰를 기술하기 때문에, 텍스트 input의 값은 *언제나* `Untitled`입니다.

116 +

117 +

118 +### 왜 Textarea에 value를 사용하나요?

119 +

120 +HTML에서, `<textarea>`의 값은 보통 그것의 자식들로 설정됩니다.

121 +

122 +```html

123 +

124 + <textarea name="description">이것은 설명입니다.</textarea>

125 +```

126 +

127 +HTML에서는 이렇게 하면 여러 줄의 값을 쉽게 개발자가 넣을 수 있게 합니다. 하지만, React는 JavaScript기 때문에, 우리는 스트링 제한이 없고 개행이 필요하면 `\n`을 사용할 수 있습니다. 이 곳에서는 `value`와 `defaultValue`가 있고, 그것이 자식들의 역할을 모호하게 합니다. 이런 이유로, `<textarea>`의 값을 설정할 때에는 자식들을 사용하지 않아야 합니다.

128 +

129 +```javascript

130 + <textarea name="description" value="이것은 설명입니다." />

131 +```

132 +

133 +자식들을 사용하기로 *했다면*, 자식들은 `defaultValue`처럼 동작할 것입니다.

134 +

135 +

136 +### 왜 Select에 value를 사용하나요?

137 +

138 +HTML `<select>`에서 선택된 `<option>`은 보통 option의 `selected` 어트리뷰트로 기술됩니다. React에서는 컴포넌트를 관리하기 쉽게 하기 위해, 다음 형식이 대신 채용됐습니다.

139 +

140 +```javascript

141 + <select value="B">

142 + <option value="A">Apple</option>

143 + <option value="B">Banana</option>

144 + <option value="C">Cranberry</option>

145 + </select>

146 +```

147 +

148 +제어되지 않는 컴포넌트로 만드려면, 대신 `defaultValue`를 사용하세요.

149 +

150 +> 주의:

151 +>

152 +> `select` 태그에 여러 옵션을 선택할 수 있도록, `value` 어트리뷰트에 배열을 넘길 수도 있습니다. `<select multiple={true} value={['B', 'C']}>`

Translate 07 to Korean