Form complexity boundary

직접 만든 훅에서 폼 라이브러리로 넘어가는 기준

폼 복잡도는 필드 개수만의 문제가 아닙니다. 값, 오류, 방문 여부, 제출 상태, 서버 검증, 동적 배열이 서로 엮이기 시작하면 상태 소유권과 리렌더 범위를 먼저 나눠야 합니다.

field shape

필드 구조가 고정되지 않음

주소, 옵션, 연락처처럼 항목 추가·삭제·순서 변경이 필요합니다.

validation

검증 위치가 여러 곳

클라이언트 스키마, 서버 중복 확인, 제출 실패 메시지가 함께 옵니다.

rendering

입력마다 큰 영역이 갱신됨

한 필드 변경이 폼 전체와 하위 컴포넌트 리렌더를 계속 유발합니다.

UI kit

제어형 컴포넌트가 섞임

날짜 선택기, 자동완성, 에디터처럼 값 연결 방식이 제각각입니다.

lifecycle

제출 흐름이 길어짐

초기값 재수신, 임시 저장, 낙관 처리, 실패 후 복구가 필요합니다.

useState reducer / hook library boundary 고정 필드 전이 규칙 배열·검증·서버 오류
useState

작고 고정된 입력

값 몇 개와 단순 제출만 있으면 객체 상태와 공통 change handler로 충분합니다.

useReducer

전이 규칙을 모아야 할 때

값 변경, 오류 설정, 초기화 같은 action이 명확하면 reducer가 읽기 쉽습니다.

custom hook

같은 패턴을 재사용

초기값, 검증, 제출 래핑을 여러 폼에 반복 적용할 때 경계를 만듭니다.

library

필드·검증·성능이 함께 복잡

등록, 배열, 스키마, 오류 노출, 제출 상태를 검증된 API로 묶습니다.

React Hook Form

비제어 입력과 구독 기반 업데이트

  • register로 네이티브 입력을 연결하고 ref를 활용합니다.
  • Controller로 UI 키트의 제어형 컴포넌트를 감쌉니다.
  • useFieldArray, resolver, formState로 배열·스키마·오류를 분리합니다.
Formik

명시적인 제어형 폼 상태

  • values, errors, touched를 React 상태로 분명히 드러냅니다.
  • validate 또는 Yup 스키마로 검증 경로를 한곳에 둡니다.
  • 상태 흐름이 읽기 쉬운 대신 큰 폼에서는 렌더 범위 분리가 필요합니다.

먼저 직접 구현

고정 필드와 제출 한 번짜리 폼은 라이브러리보다 단순한 훅이 유지보수 비용이 낮습니다.

성능은 측정 후 분리

입력 지연, 전체 리렌더, 무거운 자식 컴포넌트가 확인되면 구독형 API와 필드 분리를 검토합니다.

검증 계약을 고정

서버와 공유할 스키마, 비동기 오류 표시, 제출 실패 복구 방식까지 정한 뒤 도구를 선택합니다.