일반적인 HTML에서 입력 요소를 다룰 때는 페이지의 DOM이 해당 요소의 값을 DOM 노드에서 관리한다. document.getElementById('email').value 또는 jQuery 메서드를 사용해서 값에 접근할 수 있다. 즉, DOM을 저장소로 사용한다.

React에서 폼 또는 독립적인 텍스트 입력 상자나 버튼 같은 사용자 입력 영역을 다루려면 해결해야 할 문제가 있다. React 공식 문서에서는 “React 컴포넌트는 초기화 시점은 물론 어느 시점에든지 뷰의 상태를 표현해야 한다”라고 설명한다. React는 선언형 스타일을 사용하여 UI를 묘사함으로써 모든 것을 단순하게 유지한다. 즉, React는 UI가 결과적으로 어떻게 보여야 할지에 대해 묘사한다.

어떤 부분에서 충돌이 생기는지 눈치챘는가? 전통적인 HTML의 폼 요소는 사용자 입력에 의해 요소의 상태가 변경된다. 그렇지만 React는 UI를 묘사하기 위해 선언형 스타일을 사용하므로 상태를 적절히 반영하려면 입력이 동적이어야 한다.

따라서 컴포넌트 상태를 자바스크립트에서 관리하지 않고, 뷰와 동기화하지 않으면 문제가 나타난다. 내부 상태와 뷰가 다른 경우가 발생할 수 있다. React는 변경된 상태를 알 수 없으므로 온갖 문제와 버그에 직면하게 되고, React의 단순한 철학을 무너뜨린다. 가장 좋은 방법은 React의 render() 메서드를 폼 요소의 데이터를 포함한 실제 DOM에 최대한 밀접하게 유지하는 것이다.