Hooks로 React Form을 구축하기 위한 간단한 가이드

React를 사용하면 양식을 작성할 수 있는 여러 가지 방법이 있습니다. 내가 찾은 가장 간단한 방법은 React Hook Forms 입니다. 이 기사에서는 React Hook Forms를 사용하여 React 양식을 쉽게 만들고 빌드하는 방법을 보여 드리겠습니다.

1단계: 양식 작성

React Hook Forms는 양식을 쉽게 만들 수 있는 도구를 제공합니다. 그런 다음 양식에 대해 생성된 코드 스니펫을 복사하여 프로젝트에 붙여넣을 수 있습니다. Builder로 이동하여 나만의 양식을 만드세요.

선택적 세부 정보 추가

빌더에서 필요한 경우 또는 최대 길이와 같은 입력 속성을 사용자 정의할 수도 있습니다. 다시 말하지만 코드가 자동으로 생성되므로 매우 편리합니다.



양식을 만든 후에는 '양식 생성'을 클릭하여 모양을 확인할 수 있습니다. 내 예는 다음과 같습니다.

2단계: 코드 붙여넣기

먼저 프로젝트에서 npm install react-hook-form를 실행합니다.

이제 양식을 생성했으므로 프로젝트 파일에 붙여넣기만 하면 됩니다. 예를 들어 App.js 에 붙여넣겠습니다.

import React from 'react';
import { useForm } from 'react-hook-form';

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="First name" name="First name" ref={register({required: true, maxLength: 80})} />
      <input type="text" placeholder="Last name" name="Last name" ref={register({required: true, maxLength: 100})} />
      <input type="text" placeholder="Email" name="Email" ref={register({required: true, pattern: /^\S+@\S+$/i})} />
      <input type="tel" placeholder="Mobile number" name="Mobile number" ref={register({required: true, minLength: 6, maxLength: 12})} />

      <input name="Gender" type="radio" value="Female" ref={register({ required: true })}/>
      <input name="Gender" type="radio" value="Male" ref={register({ required: true })}/>

      <input type="submit" />
    </form>
  );
}

3단계: 양식 제출

이제 양식이 앱에 있습니다. 우리가 해야 할 일은 사용자가 양식을 제출할 때 발생하는 일을 처리하는 것입니다. 이렇게 하려면 onSubmit 함수에 일부 코드를 추가해야 합니다.

현재 우리를 위해 생성된 onSubmit 코드는 console.log(data)만 반환합니다. 여기서 data는 다음과 같은 JSON 형식의 사용자 제출 양식 데이터를 포함합니다.

// sample data object
{
  "First name": "Victoria",
  "Last name": "Lo",
  "Email": "[email protected]",
  "Mobile number": "9999999999",
  "Gender": "Female"
}

이것을 가져오고data 데이터베이스에 POST하고 싶다고 가정해 봅시다.

우리의 onSubmit 기능은 다음과 같습니다.

const onSubmit = data =>{
      //create requestOptions to prepare for post
      const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data), //send the form data
      };

      //post form data to database or something
      fetch(someURL, requestOptions)
      .then(doSomething); 
}

그리고 완료!

이것이 바로 React로 양식을 쉽게 만들 수 있는 방법입니다! 빌더 도구를 사용하여 양식을 빠르게 만드는 것이 좋지만 documentation을 자세히 읽고 어떻게 작동하는지 이해하고 자체적으로 고급 옵션을 포함하는 것이 좋습니다. 이 빠른 자습서를 읽어 주셔서 감사합니다. 도움이 되셨기를 바랍니다. 아래 의견에 질문을 주시기 바랍니다. 건배!