react hook form 과 shadcn react hook form

같은 기능이나 ui 입히기가 쉽다?
기능에 특화된 것들을 focus 등등을 설정하기 쉽다.....
폼 프로바이더

React Hook Form

React Hook Form은 React 애플리케이션에서 폼을 쉽게 다룰 수 있도록 도와주는 라이브러리 중 하나다. React Hooks를 사용하여 폼 상태를 관리하고 폼 제출을 처리하는데에 목적이 있다고 해석할 수 있다. 주요 특징과 사용법에 대해 간단하게 정리해 보겠다.

1. 간편한 사용: React Hook Form은 간단하게 사용할 수 있다. useForm, useFieldArray, useWatch와 같은 커스텀 훅들을 제공하여 필요한 상태나 기능을 쉽게 사용할 수 있다.

2. 효율적인 성능: 렌더링 성능을 최적화하기 위해 불필요한 리렌더링을 방지해준다고 한다.

3. 최소한의 보일러플레이트 코드: 다른 폼 라이브러리들과 비교했을 때 더 적은 양의 코드로 폼을 구현할 수 있다.

4. 리액트 훅스 사용: React Hook Form은 주로 리액트 훅스 (React Hooks)를 사용하여 폼의 상태를 관리한다. 이를 통해 함수형 컴포넌트에서도 간편하게 폼을 다룰 수 있다는 장점이 있다.

예시

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

interface FormInputs {
  firstName: string;
  lastName: string;
}

const MyForm: React.FC = () => {
  const { register, handleSubmit } = useForm<FormInputs>();

  const onSubmit: SubmitHandler<FormInputs> = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} />
      <input {...register('lastName')} />
      <button type="submit">Submit</button>
    </form>
  );
};

그렇다면 shadcn의 react hook form은 무엇일까?

예시

const form = useForm()

<FormField
  control={form.control}
  name="username"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Username</FormLabel>
      <FormControl>
        <Input placeholder="shadcn" {...field} />
      </FormControl>
      <FormDescription>This is your public display name.</FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>

shadcn/ui에서 쓰는 react hookt form은 조금 형태가 다르다. react hook form보다 같은 기능이나 ui 입히기가 쉽고 기능에 특화된 것들을(focus 등등)을 설정하기 쉽다고 하는데 react hook form을 작업할때 큰 불편함을 못 느꼈어서 그런지
shadcn/ui react hook form으로 바꾼 지금 크게 차이를 느끼지 못하겠다.