react-hook-form 동작 원리와 내부 구조 정리

react-hook-form은 React에서 폼 상태와 검증을 효율적으로 관리하기 위한 라이브러리다.
주요 특징은 Uncontrolled Component 기반 구조를 사용하여 불필요한 렌더링을 최소화한다는 점이다.

기본 구조

[input DOM]
     ↓ register
[react-hook-form registry]
     ↓
[validation]
     ↓
[formState, submit handler]

react-hook-form은 input의 값을 React state에 저장하지 않고,
DOM 요소에 대한 ref 기반 참조 구조를 유지한다.

register의 역할

<input {...register("email", { required: true })} />

register는 다음 기능을 수행한다.

input DOM 요소를 내부 registry에 등록
name 기준으로 필드 식별
ref 연결
validation rule 등록

값을 직접 저장하지 않고,
DOM 접근을 위한 참조 구조만 관리한다.

값 관리 방식

react-hook-form에서 input 값은 다음 위치에 저장된다.

React state ❌  
react-hook-form 내부 state ❌  
DOM input.value ⭕

입력 중에는 React state 업데이트가 발생하지 않으므로,
타이핑 시 불필요한 rerender가 발생하지 않는다.

submit 시점 처리 방식

<form onSubmit={handleSubmit(onSubmit)}>

submit 발생 시:

registry에 등록된 모든 ref 순회
각 DOM input에서 value 수집
validation rule 실행
검증 성공 → onSubmit(data)
검증 실패 → formState.errors 갱신
입력 중에는 관여하지 않고,
submit 시점에만 전체 데이터 수집과 검증이 수행된다.

formState 구성

const { formState } = useForm();

formState에는 다음 정보들이 포함된다.

errors

isDirty

isValid

isSubmitting

touchedFields

dirtyFields

이는 입력값이 아니라, 폼 상태에 대한 메타 정보다.

Controller의 역할

custom select, date picker, editor 등은
DOM input이 아니므로 register로 직접 연결할 수 없다.

이 경우 Controller를 사용한다.

<Controller
  control={control}
  name="country"
  render={({ field }) => <CustomSelect {...field} />}
/>

Controller는 controlled component를
react-hook-form 구조에 맞게 중계(adaptor) 역할로 연결한다.

정리

react-hook-form은
input 값을 React state로 관리하지 않고,
DOM 참조 구조를 통해 데이터 수집과 검증을 수행하는 방식을 사용한다.

이 구조 덕분에:

렌더링 횟수 감소

대형 폼에서도 성능 안정

상태 관리 코드 감소

라는 장점이 있다.