react.dev

7.7 KiB

Raw Blame History

id	title	permalink	prev	next
forms-ko-KR	폼	forms-ko-KR.html	transferring-props-ko-KR.html	working-with-the-browser-ko-KR.html

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

<form> 이벤트에 관한 정보는 폼 이벤트를 보세요.

Props의 상호작용

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

value: <input>, <textarea> 컴포넌트에서 사용가능.
checked: checkbox, radio타입의 <input> 컴포넌트에서 사용가능.
selected: <option> 컴포넌트에서 사용가능.

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

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

<input>, <textarea>의 value 변경.
<input>의 checked state 변경.
<option>의 selected state 변경.

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

주의:

<input>, <textarea>에서는 onChange가 DOM의 oninput 이벤트 핸들러와 같은 기능을 제공하므로 일반적인 경우에는 onChange를 사용하세요.

제어되는(controlled) 컴포넌트

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

  render: function() {
    return <input type="text" value="Hello!" />;
  }

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

  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <input type="text" value={value} onChange={this.handleChange} />;
  }

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

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

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

체크박스와 라디오 버튼의 잠제적인 문제

변경 핸들링을 일반화하기 위해 React는 change 이벤트 대신에 click 이벤트를 사용하는 것에 주의하세요. change 핸들러 안에서 preventDefault를 호출하는 경우를 재외하고 이 동작은 예상대로 동작합니다. 이런 경우 preventDefault를 제거하거나, setTimeout에 checked의 전환을 넣어서 해결 가능합니다.

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

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

  render: function() {
    return <input type="text" />;
  }

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

기본 값

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

  render: function() {
    return <input type="text" defaultValue="Hello!" />;
  }

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

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

주의:

defaultValue, defaultChecked prop은 최초 렌더에서만 사용됩니다. 뒤에 일어나는 렌더에서 값을 업데이트할 필요가 있다면, 제어되는(controlled) 컴포넌트를 사용하셔야 합니다.

심화 주제

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

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

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

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

HTML과 다르게, React 컴포넌트는 초기화 시점 뿐만 아니라, 어떤 시점이라도 반드시 뷰의 state를 나타내야 합니다. 예를 들어 React에서

  render: function() {
    return <input type="text" name="title" value="Untitled" />;
  }

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

왜 Textarea에 value를 사용하나요?

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

  <!-- 안티패턴: 이렇게 하지 마세요! -->
  <textarea name="description">이것은 설명입니다.</textarea>

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

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

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

왜 Select에 value를 사용하나요?

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

  <select value="B">
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>

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

주의:

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

7.7 KiB Raw Blame History