[React] useFormik, Formik, 폼 요소에서 쓰이는 라이브러리

 

 

📌 Formik 

폼 요소를 쉽게 다루기 위해 만든 라이브러리

Overview | Formik

// npm
npm install formik --save

// yarn
yarn add formik

 

특징	설명
📋 폼 상태 관리	values, errors, touched 등 자동 관리
✅ 유효성 검사	직접 함수로 넣거나, Yup 라이브러리랑 함께 사용
🎯 이벤트 핸들러 제공	handleChange, handleBlur, handleSubmit 등
💬 에러 메시지	에러 표시 조건도 Formik이 관리함
🔄 코드 일관성	폼이 커져도 구조가 깔끔하고 유지보수가 쉬움

 

변수 사용 예시) 👇

const formik = useFormik({
  initialValues: {
    name: '',
    email: '',
  },
  validate: (values) => {
    const errors = {};
    if (!values.name) {
      errors.name = '이름은 필수입니다';
    }
    return errors;
  },
  onSubmit: (values) => {
    console.log('제출된 값:', values);
  },
});

 

input 사용 예시) 👇

<form onSubmit={formik.handleSubmit}>
  <input
    type="text"
    name="name"
    value={formik.values.name}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
  />
  {formik.errors.name && formik.touched.name && (
    <div className="text-danger">{formik.errors.name}</div>
  )}
  <button type="submit">제출</button>
</form>

 

쓰이는 props 👇

이름	역할	예시
values	각 필드의 현재 값	values.name
errors	각 필드의 유효성 검사 에러 메시지	errors.code
touched	사용자가 필드를 건드렸는지 여부	touched.name === true
handleBlur	blur 시 자동으로 touched로 바꿔줌	<input onBlur={handleBlur} />
handleChange	값이 바뀌면 자동으로 업데이트	<input onChange={handleChange} />
setFieldValue	직접 값을 바꿔줄 때 사용	setFieldValue('name', '비니')
isValid	전체 form이 유효한지 여부	isValid === true

 

 

❓ useFormik 과 Formik

상황추천	방식
함수형 컴포넌트 안에서 바로 처리하고 싶다	✅ useFormik (Hook 방식)
폼이 좀 더 복잡하고, 컴포넌트 분리가 많다	✅ <Formik> (Component 방식)

 

❗ 요약

구분	설명	예시
useFormik	Hook으로 사용하는 Formik	const formik = useFormik(...)
Formik	컴포넌트로 감싸서 사용하는 Formik	<Formik> {(formik) => (...)}</Formik>

 

 

=> ❗❗보통은 프로젝트에서 쓰일 라이브러리를 둘 중 하나해서 정하고 한가지로 통일해서 사용❗❗

=> 요즘은 useFormik이 더 많이 쓰이는 추세! (컴포넌트를 쪼개기 가능, Form을 외부에서 조작 가능, 더 유연하고 자유로운 구성 가능)

 

나는 useFormik 사용하고 있음

 

useFormik() | Formik