register vs Controller

react-hook-form: register vs Controller 차이 정리

react-hook-form을 사용하다 보면
register와 Controller 중 무엇을 써야 할지 헷갈리는 경우가 많다.

결론부터 말하면:

native input → register
custom component → Controller

이 기준만 잡아도 대부분의 선택은 해결된다.

register 방식

<input {...register("email")} />

구조

DOM input에 직접 ref 연결
react-hook-form이 DOM에서 value 직접 수집
Uncontrolled Component 기반

동작 방식

사용자 입력
 → DOM input.value 변경
 → react-hook-form은 ref로 값 참조
 → submit 시 전체 값 수집

특징

React state를 거의 사용하지 않음
입력 시 rerender 발생하지 않음
성능 최적화에 유리

언제 사용하는가
input
textarea
select(native)

즉, HTML 기본 폼 요소

Controller 방식

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

또는

const { field } = useController({ control, name });

구조

value, onChange를 직접 연결
react-hook-form이 간접적으로 값 관리
Controlled Component 구조

동작방식
사용자 클릭
→ field.onChange(value)
→ react-hook-form 내부 상태 업데이트
→ submit 시 데이터 수집

특징

custom UI에 필수
직접 이벤트 처리 가능
복잡한 인터랙션 구현 가능

언제 사용하는가
custom dropdown
datepicker
react-select
에디터(Editor.js, Quill 등)

즉, DOM input이 아닌 모든 커스텀 컴포넌트

왜 두 방식이 공존하는가?

폼 입력 구조는 크게 두 가지로 나뉜다.

DOM이 직접 관리 가능한 구조

DOM으로 직접 관리 불가능한 구조

react-hook-form은 이 두 상황을 모두 대응하기 위해
register + Controller 이중 구조를 제공한다.