React | Form

Form Data 처리

 HTML의 기본 폼 데이터 제출은 action 속성에 지정된 url로 데이터가 전송되어 해당 페이지로 이동되었지만 페이지 새로고침을 최소화하는 리액트에서는 다른 방식으로 데이터를 전송한다. 리액트에서는 HTML 기본 폼 동작을 막고 자바스크립트 함수로 사용자가 폼에 입력한 데이터에 접근하여 폼의 제출을 처리한다.

 

 예제로 기본적인 회원가입 폼을 만들어보자.

 

 폼이 제출될 때(onSubmit) 실행되는 함수 handleSubmit을 만들었다. 우선 'e.preventDefault()'로 폼이 제출되면서 새로고침되는 것을 방지한다. 'e.target.<input_name>.value'로 제출되는 폼의 각각의 input 데이터를 가져올 수 있다.

 

 props로 상위 컴포넌트에서 전달한 메소드인 handleAccount()를 이용하여 입력받은 데이터를 json형식으로 서버에 전달하여 알맞게 처리해주었다. 'fetch()'를 통해 서버 사이드로 사용하고 있는 익스프레스 서버로 데이터를 전송해주었다.

 

 서버 사이드에서는 받은 json 데이터를 MySQL DB에 저장해두었다. 서버 사이드의 코드는 생략한다.

 

// 부모 컴포넌트의 handleAccount Method

handleAccount = (mem_info) => {
  fetch('http://localhost:3002/api/account', {	// fetch를 통해 Ajax통신을 한다.
    method: 'post',	// 방식은 post
    headers: {
      "Content-Type": "application/json; charset=utf-8"	// 헤더에서 본문 타입 설정
    },
    body: JSON.stringify(mem_info)	// body에 json 데이터를 전송할 때에는 문자열로 변경해서 보내야한다.
  })
    .then(res => res.json())
    .then(obj => {	// obj에는 서버사이드에서 전송해준 DB등록 성공여부가 담겨있다.
      if(obj.result === 'succ') {
        alert("회원가입이 완료되었습니다.");
        this.props.handleController('main');	// 내가 정의한 메소드다. 원하는 페이지로 이동시킨다.
      }
    });
}

 

 

// 자식 컴포넌트

import React from 'react';

class Account extends React.Component {

  handleSubmit = (e) => {
    e.preventDefault();

    this.props.handleAccount({
      email: e.target.email.value,
      pwd: e.target.pwd.value,
      nickname: e.target.nickname.value,
      name: e.target.name.value
    });
  }

  render() {
    return(
      <div className="account-form-wrapper">
        <h3>Join</h3>
        <form onSubmit={this.handleSubmit}>
          <table>
            <tbody>
              <tr>
                <th>이메일</th>
                <td><input type='text' name='email' /></td>
              </tr>
              <tr>
                <th>비밀번호</th>
                <td><input type='password' name='pwd' /></td>
              </tr>
              <tr>
                <th>닉네임</th>
                <td><input type='text' name='nickname' /></td>
              </tr>
              <tr>
                <th>이름</th>
                <td><input type='text' name='name' /></td>
              </tr>
              <tr>
                <td colSpan='2'><input type='submit' value='제출'/></td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>
    )
  }
}

export default Account;