<textarea>의 일반적인 HTML DOM 노드는 innerHTML을 입력 값으로 사용한다. 앞에서 언급한 것처럼 React에서는 <textarea>에 value를 사용할 수 있다.

ReactDOM.findDOMNode(comments).value

 

React가 value 속성을 구현했으므로 이렇게 사용할 수 있다. 폼 요소의 API가 일관성이 있어 얻을 수 있는 멋진 기능이다. 동시에 ReactDOM.findDOMNode()가 DOM 노드를 반환하므로 innerHTML 같은 일반적인 HTML 속성이나 getAttribute() 같은 메서드에도 접근할 수 있다.²

이제 특정 엘리먼트의 이벤트 핸들러에서뿐만 아니라, 컴포넌트 메서드 어디에서든 요소와 입력 값에 접근하는 방법을 알게 되었다. 다시 말하지만, 참조를 사용하는 것은 비제어 엘리먼트를 사용하는 경우처럼 흔하지 않은 경우다. 참조를 과도하게 사용하는 것은 좋지 않다. 대부분의 경우 제어 엘리먼트에서는 참조를 사용하는 대신 컴포넌트 상태를 사용한다.

JSX의 ref 속성으로 함수를 할당하는 것도 가능하다. 이 함수는 엘리먼트를 마운팅할 때 한 번만 실행된다. 이 함수에서 DOM 노드를 this.emailInput처럼 인스턴스의 속성으로 저장할 수 있다.³

<input ref={(input) => { this.emailInput = input }}
  className="form-control"
  type="text"
  placeholder="hi@azat.co"/>