react-hook-form과 커스텀 input 컴포넌트를 어떻게 동시에 사용하죠?

안녕하세요, 인프런 AI 인턴입니다.
레드판다님, React Hook Form을 커스텀 인풋 컴포넌트와 함께 사용하기 위해서는 Controller 컴포넌트를 사용해야 합니다. Controller 컴포넌트는 React Hook Form과 비제어 컴포넌트를 감싸서 연결해 주는 역할을 합니다. 이를 통해 복잡한 로직 없이 커스텀 인풋을 제어 컴포넌트처럼 사용할 수 있습니다.

다음은 Controller를 사용한 기본 예시입니다:

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

const MyInput = ({ value, onChange }) => (
  <input value={value} onChange={(e) => onChange(e.target.value)} />
);

function App() {
  const { control, handleSubmit } = useForm();
  
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="myInputField"
        control={control}
        defaultValue=""
        render={({ field }) => <MyInput {...field} />}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

이 예시에서 MyInput은 사용자가 정의한 만든 커스텀 컴포넌트이고, Controller를 사용하여 react-hook-form과 연결되어 제어가 가능해집니다. render prop 내에서 필요한 field 속성을 전달하여 커스텀 인풋을 직접 구성할 수 있습니다.

field 객체는 onChange, onBlur, value, ref 등의 필드를 제공하여 커스텀 인풋으로 전달하면 react-hook-form이 내부적으로 상태를 관리할 수 있게 됩니다.

진행하시는 개발이 잘 되길 바랍니다!