[javascript] 리액트에서 폼 처리 방법

22 Dec 2023

javascript

폼 처리 기본

리액트에서 양식을 처리하는 데 가장 기본적인 방법은 useState 훅을 사용하여 상태를 관리하고 onChange 이벤트 핸들러를 사용하여 입력 값을 업데이트하는 것입니다.

예를 들어, 다음과 같이 상태를 선언하고 이벤트를 처리할 수 있습니다.

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    // 폼 데이터 처리 로직
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" value={formData.username} onChange={handleInputChange} />
      <input type="password" name="password" value={formData.password} onChange={handleInputChange} />
      <button type="submit">제출</button>
    </form>
  );
}

export default MyForm;

제어되는 컴포넌트와 비제어되는 컴포넌트

리액트에서 양식 요소의 값은 제어되는 컴포넌트로 만들 수 있습니다. 이는 상태나 프로퍼티에 의해 제어되는 입력 요소를 의미합니다. 반면 비제어되는 컴포넌트는 ref를 사용하여 DOM에서 값에 접근하는 방식입니다.

폼 라이브러리 사용

리액트 애플리케이션에서 복잡한 폼 처리를 위해 formik, react-hook-form과 같은 라이브러리를 사용할 수 있습니다. 이러한 라이브러리를 사용하면 유효성 검사, 초기값 설정, 제출 처리 등을 더 쉽게 구현할 수 있습니다.

양식 처리는 웹 개발에서 중요한 부분이므로 신중하게 고려해야 합니다. 리액트에서 양식을 처리하는 방법을 습득하는 것은 뛰어난 사용자 경험을 제공할 수 있는 필수 기술입니다.