커뮤니T | React-Hook-Form (useForm, Controller)

반복되는 컴포넌트들을 분리하며 react-hook-form의

useForm와 Controller를 사용해보게 되었다

 

useForm

useForm은 주로 react-hook-form 라이브러리에서 제공하는 훅으로,

React에서 폼을 효율적으로 관리하고 유효성 검사를 쉽게 할 수 있게 도와줌

useForm을 사용하면 폼 상태와 입력값을 제어하고 검증하는 코드를 간결하게 작성할 수 있어, 특히 복잡한 폼을 다룰 때 유용함

 

주요 기능

• 폼 상태 관리: useForm은 각 필드의 값과 폼 전체의 상태를 관리
• 유효성 검사: 기본적인 HTML5 유효성 검사는 물론, 커스텀 검증을 설정하여 폼 입력값을 검증할 수 있음
  • react-hook-form의 resolver를 사용하면 Zod, Yup 등 다른 검증 라이브러리와 쉽게 연동할 수 있다
• 폼 제출 처리: handleSubmit을 통해 폼이 제출될 대 실행할 함수를 지정할 수 있음. 폼이 유효한 경우에만 제출 이벤트를 처리해 줌
• 리렌더링 최소화: 입력값이 변경될 때마다 전체 컴포넌트가 리렌더링되지 않도록 해 성능이 최적화 됨

 

예제

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

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>이메일:</label>
      <input {...register("email", { required: "이메일은 필수입니다." })} />
      {errors.email && <p>{errors.email.message}</p>}

      <label>비밀번호:</label>
      <input
        type="password"
        {...register("password", {
          required: "비밀번호는 필수입니다.",
          minLength: { value: 6, message: "비밀번호는 최소 6자 이상이어야 합니다." }
        })}
      />
      {errors.password && <p>{errors.password.message}</p>}

      <button type="submit">제출</button>
    </form>
  );
}

 

주요 메서드와 속성

• register: 인풋 필드를 폼에 등록하고, 유효성 검사를 설정할 수 있음
• handleSubmit: 폼이 제출될 때 실행될 함수를 처리
• formState: 폼의 상태, errors와 같은 유효성 검사 결과를 포함함
• reset, setValue, watch: 폼 데이터를 초기화하거나 특정 필드 값을 설정하고 감시할 수 있음

 

장점

• 간편한 설정과 적은 코드량: 폼 관리를 단순화 할 수 있음
• 성능 최적화: 필요한 경우에만 리렌더링되어 큰 폼에서도 효율적임
• 타 라이브러리와의 연동성: Zod, Yup 등과 통합해 더욱 강력한 유효성 검사를 수행할 수 있음

 

---

Controller

Controller는 React Hook Form에서 제공하는 컴포넌트로, 폼 필드와 라이브러리 상태 관리 시스템을 연결 해줌

이 컴포넌트를 사용하면 일반적인 HTML 폼 필드 뿐만 아니라 외부 UI 라이브러리의 컴포넌트(Material UI, Ant Design)나 복잡한 커스텀 컴포넌트도 쉽게 React Hook Form과 연동할 수 있다

 

주요 기능

• 폼 상태와 컴포넌트 상태를 일치시킴
  • Controller는 React Hook Form의 내부 상태와 컴포넌트의 값(value), 이벤트(onChange)를 동기화함
  • 이로인해 폼의 데이터를 추적하고, 검증하고, 상태를 쉽게 제어할 수 있음
  • 예를들어, Controller는 내부적으로 폼 필드의 value, onChange, onBlur 등을 설정하여 폼 상태를 자동으로 업데이트 함
• 복잡한 컴포넌트와의 통합 지원
  • Controller는 직접적으로 register와 연결할 수 없는 컴포넌트에 유용
  • 기본 Input이나 select와 같은 HTML 요소는 register로 쉽게 관리할 수 있지만, 커스텀 컴포넌트나 서드파티 UI 라이브러리의 컴포넌트는 일반적으로 Controller와 함께 사용하는 것이 좋음
  • 예를들어, DatePicker나 Select 컴포넌트 같은 복잡한 UI 컴포넌트와 React Hook Form을 연결할 때 적합
• 폼 검증 관리
  • Controller를 통해 rules 속성으로 유효성 검사 규칙을 지정할 수 있어, 폼 상태와 유효성 검사가 복잡한 컴포넌트에 쉽게 적용됨
  • Controller는 폼이 제출되지도 전에 필드 유효성을 확인하고, 에러 메시지를 보여주는 역할도 함
• 컨트롤된 컴포넌트 지원
  • Controller는 React Hook Form의 watch나 setValue와 같은 메서드와 자연스럽게 연동됨
  • 이로 인해 제어된 컴포넌트의 상태 변화를 감지하거나, 값 업데이트, 폼 리셋 등의 동작을 쉽게 수행할 수 있다

 

예제

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import TextField from '@mui/material/TextField';

function MyForm() {
  const { control, handleSubmit } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="username"
        control={control}
        defaultValue=""
        rules={{ required: 'Username is required' }}
        render={({ field, fieldState }) => (
          <TextField
            {...field}
            label="Username"
            error={!!fieldState.error}
            helperText={fieldState.error?.message}
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Controller를 사용해서 Material UI의 TextField를 React Hook Form과 연결하는 예

주요메서드와 속성

• name: 폼 필드 이름 지정
• control: useForm에서 받아오는 control 객체로, 폼 상태를 관리
• rules: 유효성 검사 규칙을 정의
• render: 필드 렌더링을 위한 콜백 함수, field와 fieldState를 통해 value, onChange, onBlur 등을 연결하고, 에러 상태를 관리

 

---

gpt의 힘을빌려 코드를 작성하던 중

이 친구가 로그인 폼에선 Controller를 사용하지 않고 회원가입에서는 사용하는 것이 아닌가

그래서 물어보고 얻은 답은 아래와 같다 (필수는 아님)

회원가입 폼에서 Controller를 사용하는 이유는 React Hook Form의 register와 함께 직접 관리하기 어려운 복잡한 컴포넌트의 상태를 제어하기 위해서입니다.
Controller를 사용하면 입력의 value와 onChange 등을 명시적으로 설정할 수 있고, 특히 복잡한 유효성 검사를 적용할 때 유용합니다.

로그인 폼에서는 상대적으로 단순한 input 요소들이라 register를 직접 사용해도 충분히 제어가 가능하지만,
회원가입 폼처럼 useState를 통해 동적 상태를 추가로 제어할 필요가 있는 경우 Controller가 더 적합한 선택이 될 수 있습니다.

// 또 다른 답
register는 간단한 입력 필드에서 유효성 검사와 값을 관리할 때 효과적이고, 코드를 더 간결하게 유지할 수 있습니다.

하지만, Controller는 React Hook Form 과 직접 연동되지 않는 커스텀 컴포넌트나 서드파티 라이브러리와 함께 사용할 때 유용합니다.
예를 들어, 특정 입력 필드에서 onChange, onBlur 등의 추가 동작을 더 정교하게 제어해야 하거나,
자동 완성 또는 날짜 선택기 같은 커스텀 입력 컴포넌트를 사용할 경우 Controller가 더 적합할 수 있습니다.