언젠가는 정보를 서버나 다른 컴포넌트로 보내야 한다. 보낼 때는 값을 상태에 깔끔하게 정리해야 한다. 예를 들어 대출 신청서 폼을 만들고, 사용자 이름, 주소, 전화번호, 주민등록번호를 입력받는다고 가정해보자. 각 입력 영역이 각자의 변경 사항을 처리한다. 폼의 맨 아래에는 제출 버튼을 넣어서 입력으로 저장한 상태를 서버로 보낸다. 다음 예제 코드는 onChange가 있는 이름 입력 영역으로 모든 입력 내용을 상태에서 관리한다.
예제 코드 7.5 폼 요소 렌더링하기
constructor(props) { super(props) this.handleInput = this.handleInput.bind(this) this.handleSubmit = this.handleSubmit.bind(this) ... } handleFirstNameChange(event) { this.setState({firstName: event.target.value}) ---- 이름(firstName) 영역의 변경 사항을 감지하여 상태에 저장한다. } ... handleSubmit() { fetch(this.props['data-url'], {method: 'POST', body: JSON.stringify(this.state)}) ---- 프러미스 기반의 Fetch API를 사용해서 data-url 속성으로 전달받은 URL에 데이터를 전송한다(이 책을 쓰는 시점에서는 실험적인 단계지만 대부분의 최신 브라우저에서 지원된다). .then((response)=>{return response.json()}) .then((data)=>{console.log('Submitted: ', data)}) } render() { return <form> <input name="firstName" onChange={this.handleFirstNameChange} type="text"/> ... <input type="button" onClick={this.handleSubmit} ---- 이벤트 핸들러를 정의하여 제출 버튼 이벤트를 처리한다. value="Submit"/> </form> }