React Hook Form과 Yup으로 복잡한 폼 만들기: 실전 가이드

2024-09-25 18:37:57

reactwebdevtypescriptux

소개

웹 애플리케이션에서 폼을 만드는 것은 종종 어려운 작업입니다. 특히 상태 관리와 유효성 검사(validation)을 동시에 고려해야 할 경우 더더욱 그렇습니다. 이 블로그 포스트에서는 React Hook Form과 Yup을 사용하여 복잡한 폼을 제작하는 방법을 알아보고, 이를 통해 코드의 구조를 깨끗하고 유지보수 가능하게 만드는 방법에 대해 설명하겠습니다. 이러한 내용을 바탕으로 독자 여러분이 실제 프로젝트에서 사용할 수 있는 유용한 지식을 제공하고자 합니다.

배경 및 필요성

많은 웹 애플리케이션에서 사용자로부터 정보를 입력받아야 할 필요가 있으며, 이를 위해서는 폼을 구현하는 것이 필수적입니다. 하지만 폼의 구현에는 여러 가지 도전 과제가 존재합니다. 다양한 입력 필드의 동적 관리, 상호작용 시 발생하는 오류 메시지의 처리, 그리고 각 입력 필드에 대한 유효성 검사 등을 모두 감안해야 합니다.

React Hook Form은 이러한 문제들을 해결할 수 있는 훌륭한 도구입니다. 이 라이브러리는 React의 훅(hook) 개념을 이용하여 폼 상태를 관리해 주며, 코드의 가독성을 높이고 성능을 개선할 수 있도록 돕습니다. 하지만 유효성 검사 측면에서는 Yup을 사용하여 강력한 validation 기능을 결합할 수 있습니다. 이러한 두 라이브러리를 통해 사용자는 보다 간편하게 복잡한 폼을 구현하고, UI/UX를 개선할 수 있습니다.

핵심 내용

이번 블로그 포스트에서 우리가 구현할 폼은 책 가게를 생성하는 방식입니다. 사용자는 가게의 이름을 입력하고 여러 권의 책을 추가할 수 있어야 합니다. 각 책 항목은 제목, 수량, 제본 유형을 입력받아야 합니다. 이 과정에서 React Hook Form을 통해 상태 관리를 하고, Yup을 통해 유효성 검사를 수행하게 됩니다.

1. 폼 컴포넌트

폼의 기본적인 구조를 담당하는 컴포넌트입니다. 이 컴포넌트에서는 React Hook Form의 useForm 훅을 사용하여 폼 상태를 관리하고, useFieldArray를 통해 동적 책 항목을 관리합니다.

핵심 특징:

동적 필드: 사용자가 책 항목을 동적으로 추가 또는 제거할 수 있습니다.
유효성 검사: Yup을 사용하여 사용자의 입력을 검증하여 모든 필수 필드가 올바르게 입력되었는지 확인합니다.

코드 스니펫:

const { control, register, handleSubmit, formState: { errors } } = useForm({
  resolver: yupResolver(bookStoreValidationSchema),
  defaultValues: {
    name: "",
    books: [],
  },
});

이 구조를 통해 useForm과 resolver를 함께 사용하여 Yup의 유효성 검사를 폼에 손쉽게 통합할 수 있습니다.

2. BookInputRow 컴포넌트

각 책 입력 항목을 나타내는 컴포넌트입니다. 사용자는 여기에서 각 책의 제목, 수량, 제본 유형을 입력할 수 있습니다.

핵심 특징:

자동완성 기능: 사용자는 미리 정의된 목록에서 제본 유형을 선택할 수 있습니다.
오류 처리: 각 입력 필드가 유효하지 않을 경우 오류 메시지를 표시하여 사용자에게 피드백을 제공합니다.

코드 스니펫:

<Controller
  control={props.control}
  name={`books.${props.index}.binding`}
  render={({ field }) => (
    <Autocomplete
      {...field}
      options={bookTypes}
      onChange={(_, value) => field.onChange(value)}
      renderInput={(params) => (
        <TextField
          {...params}
          label="책 종류"
          error={!!props.errors.books?.[props.index]?.binding}
          helperText={props.errors.books?.[props.index]?.binding?.message}
          fullWidth
        />
      )}
    />
  )}
/>

이 구성은 third-party 컴포넌트를 통합하여 폼 상태를 관리하는 데 유용하며, 더욱 풍부한 사용자 경험을 제공합니다.

3. 유효성 검사 스키마

Yup을 사용하여 폼 필드에 대한 유효성 검사 규칙을 정의합니다. 이 스키마는 다음과 같은 조건을 확인합니다.

책 가게 이름은 필수입니다.
각 책 항목에는 제목, 수량, 제본 유형이 반드시 필요합니다.
최소한 하나의 책을 추가해야 합니다.

코드 스니펫:

export const bookStoreValidationSchema = yup.object().shape({
  name: yup.string().required("이름은 필수입니다."),
  books: yup.array().of(
    yup.object().shape({
      title: yup.string().required("책 제목은 필수입니다."),
      amount: yup.number().required("수량은 필수입니다.").positive("수량은 1보다 커야 합니다.").integer("수량은 정수여야 합니다."),
      binding: yup.string().required("책 종류는 필수입니다."),
    })
  ).min(1, "최소한 한 권의 책을 추가해야 합니다.").required("최소한 한 권의 책을 추가해야 합니다."),
});

Yup을 통한 유효성 검사는 사용자 경험을 개선하고, 제출된 데이터가 유효한지를 명확하게 보장합니다.

예시

위의 내용을 바탕으로 실제로 프로젝트를 설정하는 방법은 다음과 같습니다. GitHub 리포지토리를 클론하여 사용할 수 있습니다.

git clone https://github.com/WhiteOlivierus/ReactMuiFormYup.git
cd ReactMuiFormYup
npm install
npm run dev

이렇게 설정된 프로젝트를 통해 코드 구조를 탐색하고 직접 수정하여 실력을 높일 수 있는 기회를 제공합니다.

결론

이번 포스트에서는 React Hook Form과 Yup을 사용하여 복잡한 폼을 구축하는 방법을 살펴보았습니다. 이러한 라이브러리들을 결합하여 사용하면 기능적이면서도 사용자 친화적이고 유지 관리가 쉬운 폼을 만들 수 있습니다. 보다 완벽한 구현을 원하신다면 GitHub 리포지토리를 방문하시는 것을 추천드립니다. 행복한 코딩 되시길 바랍니다!