React에서 폼 처리하기: 폼 상태 관리 및 제출 기술

개요

React에서 폼은 단순한 사용자 인터페이스 컴포넌트를 넘어, 데이터 입력 및 제출의 중요한 역할을 합니다. 사용자가 입력한 데이터를 효과적으로 관리하고 서버에 제출할 수 있는 방법에 대해 알아봅시다. 이 글에서는 폼 상태 관리를 중심으로, useState 후크를 사용하는 방법과 onSubmit 이벤트 핸들러를 다룰 것입니다.

폼 상태 관리

React 컴포넌트에서 폼 상태를 관리하려면 useState 후크를 사용하여 각 입력 필드에 대한 상태를 정의할 수 있습니다. 아래는 간단한 예시입니다:

jsx
import React, { useState } from 'react';

function FormComponent() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

  return (
    <form>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={handleNameChange}
        />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={handleEmailChange}
        />
      </div>
    </form>
  );
}

export default FormComponent;

위 예제에서 우리는 두 개의 useState 후크를 사용하여 name과 email 상태를 관리하고 있습니다. handleNameChange와 handleEmailChange 함수는 각각의 입력 필드 값이 변경될 때 상태를 업데이트합니다.

폼 제출 처리

폼에서 사용자가 입력한 데이터를 수집하고 서버로 제출하려면 onSubmit 이벤트 핸들러를 사용해야 합니다. 아래는 동일 폼에서 제출 처리를 추가한 예시입니다:

jsx
import React, { useState } from 'react';

function FormComponent() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 폼 데이터 수집
    const formData = {
      name,
      email
    };
    console.log('폼 제출됨:', formData);
    // 서버에 폼 데이터 제출 처리
    // 예: fetch('api/submit', { method: 'POST', body: JSON.stringify(formData) })
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={handleNameChange}
        />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={handleEmailChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default FormComponent;

여기서는 handleSubmit 함수를 통해 폼 제출을 처리하고 있습니다. event.preventDefault() 메서드를 사용하여 폼의 기본 제출 동작을 막고, JavaScript를 사용하여 필요한 작업을 수행할 수 있게 합니다. 예를 들어, 데이터가 formData 객체에 수집되고 콘솔에 출력됩니다. 실제 서버에 데이터를 제출하려면 fetch API나 axios와 같은 라이브러리를 사용할 수 있습니다.

상태와 유효성 검사

폼 유효성 검사를 실행하여 사용자가 올바른 데이터를 입력했는지 확인하는 것도 중요합니다. 상태를 이용하여 이 검사를 수행할 수 있습니다. 아래는 기본적인 유효성 검사 예시입니다:

jsx
import React, { useState } from 'react';

function FormComponent() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [errors, setErrors] = useState({});

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

  const validate = () => {
    const newErrors = {};
    if (name.trim() === '') {
      newErrors.name = 'Name is required';
    }
    if (email.trim() === '') {
      newErrors.email = 'Email is required';
    }
    return newErrors;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const newErrors = validate();
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }
    // 폼 데이터 수집
    const formData = { name, email };
    console.log('폼 제출됨:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={handleNameChange}
        />
        {errors.name && <span>{errors.name}</span>}
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={handleEmailChange}
        />
        {errors.email && <span>{errors.email}</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default FormComponent;

위 예시에서 validate 함수는 폼 필드 값을 검사하여 오류가 있을 경우 오류 메시지를 반환합니다. handleSubmit 함수에서 이 검사를 실행하고 오류가 있을 경우 errors 상태를 업데이트하여 화면에 오류 메시지를 표시합니다.

마무리

이 글에서는 React에서 폼 상태를 관리하고 폼을 제출하는 기본적인 방법을 알아보았습니다. 또한, 폼 데이터를 유효성 검사하는 방법도 다루었습니다. 실제 프로젝트에서는 더 복잡한 폼 로직과 다양한 검증 절차가 필요할 수 있지만, 이 기본적인 개념을 이해하면 React에서 폼을 효과적으로 관리하고 제출하는 데 큰 도움이 될 것입니다.