[Formik] 리액트 폼 라이브러리

https://formik.org/

Formik

 

눈물없이 리액트와 리액트 라이브러리에서 폼 빌드해주는 라이브러리이다.

3가지 장점

- 검증과 에러 메시지

- 폼 제출 다루기

- 폼 상태 안/밖으로 values 얻기

 

 

 

Redux-Form 대신 쓰는 이유는?

- Redux-Form is 22.5 kB minified gzipped (Formik is 12.7 kB)

- 폼은 본질적으로 임시적이고 로컬로 상태관리하면 된다. 리덕스같은 Flux 라이브러리에서 추적할 필요없다.

 

 

 

적용 방법

yarn add formik

 

 

 

로그인 폼을 예시로 만들어보았다.

React + Typescript

import { useFormik } from 'formik';

const SignForm = () => {
  const formik = useFormik({
    initialValues: {
      firstName: '',
      lastNAme: '',
      email: ''
    },
    validationSchema: Yip.object({
      firstName: Yup.string().max(15, 'Must be 15 characters or less').required('Required'),
      lastName : Yup.string().max(20, 'Must be 20 characters or less').required('Required')
    }),
    onSubmit: value => {
      alert(JSON.stringify(values, null, 2);
    }
  })
  
  
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="firstName">first name</label>
      <input id="firstName" type="text" {...formik.getFieldProps('firstName')}/>
      { formik.touched.firstName && formik.errors.firstName ? (<div>{formik.errors.firstName}</div>): null }
      <label>last name</label>
      <input id="lastName" type="text" {...formik.getFieldProps('firstName')} />
      { formik.touched.lastName && formik.errors.lastName ? (<div>{formik.errors.lastName}</div>) : null }
      <button type="submit">Submit</button>
    </form>
  )
}

 

 

getFieldProps()

https://formik.org/docs/tutorial#getfieldprops