React Hook Form vs Formik 비교 예제

소개

리액트에서 폼을 관리할 때 선택지는 많다. 그중 React Hook Form과 Formik은 가장 널리 쓰인다. 두 라이브러리는 목표가 비슷하지만 설계 철학과 사용법이 다르다. 이 글에서는 초보자도 이해하기 쉽도록 기본 사용 예제와 검증 사례, 장단점을 코드와 함께 비교한다.

설치와 기본 개념

설치

두 라이브러리 모두 설치가 간단하다. 프로젝트에 맞게 설치 후 시작할 수 있다.

npm install react-hook-form
npm install formik yup

핵심 차이

• React Hook Form: uncontrolled 입력 중심. 성능 최적화에 유리.
• Formik: controlled 입력 중심. 선언적이고 직관적인 상태 흐름.
• 검증: Formik은 내장과 스키마 검증(yup)을 많이 사용, React Hook Form도 yup과 함께 사용 가능.

간단한 폼 예제

먼저 양쪽의 기본 사용법을 살펴본다. 실무에서는 형태와 검증 방식에 따라 선택한다.

React Hook Form 사용법 예제

import React from 'react'
import { useForm } from 'react-hook-form'

function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm()
  const onSubmit = data => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: true })} placeholder='Name' />
      {errors.name && <span>이름은 필수입니다</span>}

      <input {...register('email', { required: true, pattern: /.+@.+\..+/ })} placeholder='Email' />
      {errors.email && <span>유효한 이메일을 입력하세요</span>}

      <button type='submit'>전송</button>
    </form>
  )
}

export default ContactForm

Formik 사용법 예제

import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'

function ContactFormFormik() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validate={values => {
        const errors = {}
        if (!values.name) errors.name = '이름은 필수입니다'
        if (!values.email) errors.email = '이메일은 필수입니다'
        return errors
      }}
      onSubmit={(values) => console.log(values)}
    >
      {() => (
        <Form>
          <Field name='name' placeholder='Name' />
          <ErrorMessage name='name' component='div' />

          <Field name='email' placeholder='Email' />
          <ErrorMessage name='email' component='div' />

          <button type='submit'>전송</button>
        </Form>
      )}
    </Formik>
  )
}

export default ContactFormFormik

리액트 폼 검증 예제 (스키마 기반)

복잡한 검증은 yup 같은 스키마 라이브러리와 조합하면 관리가 쉬워진다. 아래는 두 라이브러리에서 yup을 사용하는 간단한 예다.

React Hook Form + yup

import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'

const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required()
}).required()

function FormWithYup() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  })
  // ... 같은 구조로 사용
}

Formik + yup

import { Formik, Form, Field } from 'formik'
import * as yup from 'yup'

const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required()
})

<Formik
  initialValues={{ name: '', email: '' }}
  validationSchema={schema}
  onSubmit={...}
> ... </Formik>

성능과 확장성 비교

• React Hook Form은 uncontrolled 방식으로 렌더링을 최소화한다. 입력 필드가 많을 때 유리하다.
• Formik은 상태를 중앙에서 관리하므로 디버깅과 흐름 이해가 쉽다. 하지만 필드가 많을 때 리렌더링 비용이 커질 수 있다.
• 검증 로직은 둘 다 유연하다. 프로젝트 성격에 따라 스키마 기반이나 커스텀 검증을 선택하면 된다.

실무 선택 기준

• 간단한 폼과 성능이 중요하면 React Hook Form 권장.
• 명시적인 상태 관리와 선언적 흐름을 원하면 Formik이 더 직관적.
• 이미 Formik으로 작성된 코드가 많으면 유지보수를 고려해 그대로 사용하는 것도 현실적인 선택.

Formik 대체 React 관점에서 볼 때

프로젝트 전환을 고민할 때는 작업량과 혜택을 비교한다. 작은 폼을 일일이 바꾸면 오히려 비용이 클 수 있다. 반면 성능 병목이 명확하면 부분 전환을 검토한다. 이 과정에서 'formik 대체 react' 같은 키워드는 검색 시 전환 사례와 마이그레이션 전략을 찾는 데 유용하다.

요약 및 권장사항

간단히 정리하면 다음과 같다.

• react hook form 사용법은 불필요한 리렌더를 줄이는 데 초점이 있다.
• Formik은 학습 곡선이 완만하고 상태 흐름이 명확하다.
• 리액트 폼 검증 예제는 스키마 기반 검증을 도입하면 재사용성과 유지보수가 좋아진다.

마지막으로, 선택 기준은 팀 경험과 프로젝트 요구사항이 가장 중요하다. 위 예제와 비교를 통해 적합한 도구를 결정하면 실무에서 더 안정적인 폼 관리를 구현할 수 있다.