React 폼 컴포넌트 구축 가이드

React Form Component 빌드 가이드

React에서 폼을 구축하려면 세심한 상태 관리가 필요합니다. 이 가이드는 회원가입 폼을 처음부터 구축하는 방법을 안내합니다.

다음 네 가지 주요 개념을 배우게 됩니다:

• 상태 관리 (State Management) 모든 폼 필드를 하나의 상태 객체에 저장합니다. useState 훅을 사용하여 이름, 나이, 이메일, 비밀번호를 관리합니다.

• 입력 처리 (Handling Inputs) 하나의 함수를 사용하여 모든 입력 변경 사항을 관리합니다. 기존 데이터를 스프레드 연산자로 펼치고 입력 이름(name)에 따라 새로운 값을 추가하여 상태를 업데이트합니다.

• 폼 유효성 검사 (Form Validation) 제출하기 전에 모든 필드에 데이터가 입력되었는지 확인합니다. 필드가 비어 있으면 경고창을 표시합니다.

• 키보드 지원 (Keyboard Support) Enter 키를 위한 리스너를 추가합니다. 이를 통해 사용자는 버튼을 클릭하지 않고도 폼을 제출할 수 있습니다.

코드 예시:

import { useState } from "react";

function FormValidation() {
  const [userdata, setUserdata] = useState({
    name: "",
    age: "",
    mobile: "",
    email: "",
    dob: "",
    password: ""
  });

  function getdata(e) {
    const { name, value } = e.target;
    setUserdata({
      ...userdata,
      [name]: value
    });
  }

  function validate() {
    const { name, age, mobile, email, dob, password } = userdata;
    if (name && age && mobile && email && dob && password) {
      alert("Submitted successfully");
    } else {
      alert("Please fill all fields");
    }
  }

  function handlekey(e) {
    if (e.key === "Enter") {
      validate();
    }
  }

  return (
    <form onKeyDown={handlekey}>
      <input name="name" onChange={getdata} value={userdata.name} />
      <input name="age" onChange={getdata} value={userdata.age} />
      <input name="mobile" onChange={getdata} value={userdata.mobile} />
      <input name="email" onChange={getdata} value={userdata.email} />
      <input name="dob" onChange={getdata} value={userdata.dob} />
      <input name="password" type="password" onChange={getdata} value={userdata.password} />
      <button type="button" onClick={validate}>Submit</button>
    </form>
  );
}

출처: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh