React/회원관리

[React] 리액트 초보의 로그인& 회원가입 고군분투: 2. React Hook Form 가볍게 시작하기 (feat.TypeScript)

개발자 뭄뭄 2023. 2. 17. 12:10
반응형

공식문서를 따라서 가볍게 시작해봅시다. 우리 프로젝트는 TypeScript를 사용하기 때문에 TypeScript를 기반으로 설명을 이어가겠습니다.

Get Started
Installing React Hook Form only takes a single command and you're ready to roll. Copy The following code excerpt demonstrates a basic usage example: ♦ This video tutorial illustrates the basic usage and concepts of React Hook Form. One of the key concepts in React Hook Form is to register your component into the hook.
https://react-hook-form.com/get-started

1. useForm

핵심기능이라고 할 수 있는 form을 쉽게 만들고, 보내는 방법을 설명합니다.

1-1. register

react-hook-form의 가장 큰 특징인 register는 콜백함수로 쉽게 생각하면 hook form 안에 내가 사용할 input, select 등의 컴포넌트를 등록한다는 뜻이다. register를 사용하면 유효성검사(validation)과 제출(submission)이 모두 가능하다.

💡
각각의 field는 key를 위해서 이름을 꼭 가져야 한다.

이름을 만드는 방법은 3가지가 있는데, 각각 등록하는 방법에 따라서 Submit되는 결과가 다르다. 필요에 따라 사용하면 된다.

Input NameSubmit ResultOption
register(”firstName”){firstName: ‘value’}우리가 사용할 방식
register(”name.firstName’){name: {firstName: ‘value’ }}
register(”name.firstName.0”){name: {firstName: [’value’] }}
💡
유효성 검사는 기본 HTML 양식 + custom을 추가할 수 있다.

유효성 검사 하는 방법이나 할 수 있는 종류, 에러메세지 모두 공식문서를 참고하자. 하단에 자세하게 나와있다.

아래 코드 예시를 보면 주석을 달아서 이해가 쉬울 것이다.

참고로 <input {...register('firstName')} />가 무슨 뜻인지 모른다면 (정상이다.) register가 받는 props요소로 onChange onBlur ref가 더 있는데 이 모든 요소를 상속받겠다는 뜻이다. 위 세가지가 무슨 뜻인지 궁금하면 공식문서로 들어가자.

  • 코드 예시와 설명 보기
    import ReactDOM from "react-dom";
import { useForm, SubmitHandler } from "react-hook-form";

typescript에서 열거형을 사용하고 싶을 때 사용하는 방법(권장되지 않는다고 함. 자세한 내용은 검색)
enum GenderEnum {
  female = "female",
  male = "male",
  other = "other"
}


typescript이기 때문에 interface를 지정해줘야 한다.
interface IFormInput {
  firstName: String;
  gender: GenderEnum;
}

export default function App() {
	hook를 사용하는 것처럼 상단에 등록한다.
	마치 useState를 사용하는 것처럼 아래 부분은 제일 기본이 되는 부분이다.
  const { register, handleSubmit } = useForm<IFormInput>();
  const onSubmit: SubmitHandler<IFormInput> = data => console.log(data);

  return (
		form이 제출되었을 때를 제어하는 부분이다. 제출시에 onSubmit함수를 실행한다.
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>

      <input {...register("firstName")} />
      <label>Gender Selection</label>
      <select {...register("gender")} >
        <option value="female">female</option>
        <option value="male">male</option>
        <option value="other">other</option>
      </select>
      <input type="submit" />
    </form>
  );
}

1-2. handleSubmit

handleSubmit은 form의 Submit 처리를 하는 함수이다. 유효성 검사를 통과하면 form data를 받는 함수이다. 위의 예시코드에서는 submit시에는 onSubmit 함수가 실행된다.

<form
    onSubmit={handleSubmit(() => {
      try {
        request();
      } catch (e) {
        // handle your error state here
      }
    })}
  />

우리의 경우 submit이 되었을 때 서버와 통신하고 싶다!

이럴 때 사용하는 것은 바로바로

1-3. formState

import { TextField } from "@material-ui/core";
import { useController, useForm } from "react-hook-form";

function Input({ control, name }) {
  const {
    field,
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields }
  } = useController({
    name,
    control,
    rules: { required: true },
  });

  return (
    <TextField 
      onChange={field.onChange} // send value to hook form 
      onBlur={field.onBlur} // notify when input is touched/blur
      value={field.value} // input value
      name={field.name} // send down the input name
      inputRef={field.ref} // send input ref, so we can focus on input when error appear
    />
  );
}

Uploaded by N2T

반응형