7.2.3 값에 참조로 접근하기

비제어 컴포넌트를 다룰 때는 onChange 같은 이벤트를 이용해 입력을 감지하지 않으므로 refs를 통해 참조로 값에 접근한다. 그렇지만 참조가 이 특정 패턴에만 적용되는 것은 아니다. 참조를 사용하는 것이 안티패턴으로 여겨져서 눈살을 찌푸릴 수도 있겠지만, 참조 사용이 적합한 상황이라면 어디에나 적용할 수 있다. React 엘리먼트를 적절히 정의한다면 뷰(DOM)의 상태와 내부 상태가 동기화되므로 참조를 사용할 필요가 거의 없다. 그렇지만 참조를 이해할 필요는 있으므로 여기서 설명하고자 한다.

참조를 사용하면 React 컴포넌트의 DOM 요소 또는 노드를 가져올 수 있다. 변경을 감지하지 않고 폼 요소의 값을 가져와야 할 때 유용하다. 참조를 사용하려면 다음 두 가지 작업이 필요하다.

• render 메서드에서 반환하는 엘리먼트의 ref 속성에 문자열을 전달하는 경우 카멜 표기법으로 작성되어 있어야 한다. 예를 들어 email:<input ref="userEmail" />처럼 작성한다.

• 지정한 이름으로 다른 메서드에서 DOM 인스턴스에 접근한다. 예를 들어 이벤트 핸들러에서 this.refs.NAME이 this.refs.userEmail이다.

 

this.refs.NAME으로 React 컴포넌트의 인스턴스에 접근할 수 있다. 그렇지만 입력 값을 어떻게 확인할 수 있을까? DOM 노드를 가져오는 것이 좀 더 유용하겠다! 컴포넌트의 DOM 노드에 접근하려면 ReactDOM.findDOMNode(this.refs.NAME)을 사용한다.

let emailNode = ReactDOM.findDOMNode(this.refs.email)
let email = emailNode.value