7.2.4 기본값 설정하기

대출 신청서 예제의 일부 영역에 기존 데이터를 입력해줘야 한다고 가정해보자. 일반적인 HTML이라면 폼 영역에 value를 작성하면 사용자가 페이지에서 값을 변경할 수 있다. 그렇지만 React는 value, checked, selected를 뷰와 엘리먼트 내부 상태에서 일관되게 유지한다. React에서 다음과 같이 입력 값을 하드코딩하면 읽기 전용이 되어버린다.

<input type="text" name="new-book-title" value="Node: The Best Parts"/>

 

대부분의 경우 이런 것을 원하지 않을 것이다. 따라서 React는 특별한 속성인 defaultValue를 이용해서 입력 값을 설정하고, 사용자가 폼 요소를 수정할 수 있도록 했다.

예를 들어 폼이 이전에 저장된 경우, 사용자를 위해 <input> 영역을 미리 채워 놓으려고 한다. 이런 경우 폼 요소에 defaultValue 속성을 사용한다. 입력 영역의 기본값을 다음과 같이 설정할 수 있다.

<input type="text" name="new-book-title" defaultValue="Node: The Best Parts"/>