더북(TheBook)

언젠가는 정보를 서버나 다른 컴포넌트로 보내야 한다. 보낼 때는 값을 상태에 깔끔하게 정리해야 한다. 예를 들어 대출 신청서 폼을 만들고, 사용자 이름, 주소, 전화번호, 주민등록번호를 입력받는다고 가정해보자. 각 입력 영역이 각자의 변경 사항을 처리한다. 폼의 맨 아래에는 제출 버튼을 넣어서 입력으로 저장한 상태를 서버로 보낸다. 다음 예제 코드는 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>
}

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.