formik - 폼 핸들링 라이브러리

회원가입 부분을 개발하기 위해 여러개의 input을 가지고 있는 form 을 핸들링하기 위해, 여러개의 state가 필요했다.

input의 갯수만큼의 state와 error가 필요했다.

즉, 나는 6개의 input이므로 최소 12개의 state를 사용해야했는데, 이것은 너무 귀찮으므로!

알아본 라이브러리는 formik 이다!

비슷한 라이브러리로 react-hook-form이 있다. 이것은 노마드코더에서 조금 다루어보았기 때문에,

formik를 이용하여 해보기로 하였다.

formik가 무엇일까?

• form의 핸들링을 쉽게 해주기 위한 라이브러리!

장점이 무엇일까?

• state를 각각 만들어주지 않아도 된다.

• 이벤트함수 (onChange)같은 함수를 직접 만들지 않아도 된다.

formik랑 비슷한데 왜 Redux-Form을 안쓸까?

Form 상태는 본질적으로 일시적이고 지역적이다

Redux-Form은 모든 키 입력에서 전체 최상위 Redux를 여러번 호출한다. ⇒ 즉, 앱이 커지면 대기시간이 증가!

Redux-Form이 더 무겁다!

Formik의 목표는 짜증나는 일을 하고,

나머지는 개발자에게 맡기는 최소한의 API로 확장 가능하고 성능이 뛰어난 라이브러리!

 

formik 설치

yarn add formik

Formik는 Form의 상태를 추적한다.

handleChange, handleBlur, handleSubmit등 직접 만들어주지 않아도 된다!

handleChange ⇒ input의 값이 변하는 것을 체크

handleBlur ⇒ input의 밖에서 빠져나갔는지 체크

                            -  나는 Blur라는 개념을 이제 알았다. 에러메시지를 띄울 때 필요하므로 기억하자!

handleSubmit ⇒ form의 제출 요청을 보낸다!

 

touched란 ?

• 해당 input의 방문여부를 체크해준다!

이것도.. 에러메시지를 띄울 때 방문여부에 따라 에러메시지를 띄워야한다! 기억할 것..!

여러개의 input이 있는 form 컴포넌트 에서 formik를 사용해보자

formik는 initaialValues를 필요로하므로 작성해주자.

 const formik = useFormik<InitialValues>({
    initialValues: {
      email: '',
      password: '',
      passwordConfirm: '',
      name: '',
      phone: '',
      code: '',
      privacy: false,
    },
    onSubmit: values => {
      console.log(values);
    }
  });

initialValues를 작성 이후, onSubmit을 주어, 폼이 전송되었을 때 할 일을 적어주자!

이 때 가장 큰 form 컴포넌트에서 onSubmit={formik.handleSubmit}를 해주는것도 잊지말자!

formik 내 handleSubmit를 이용하여 form이 제출 되는 것을 확인할 수 있다.

해당 form에서 yup을 이용하여 작성해놓은 validation을 주려면 validationSchema속성을 이용하자!

const SignUp = () => {
  const formik = useFormik<InitialValues>({
    initialValues: {
      email: '',
      password: '',
      passwordConfirm: '',
      name: '',
      phone: '',
      code: '',
      privacy: false,
    },
    onSubmit: values => {
      console.log(values);
    },
    validationSchema: SignUpValidationSchema,
  });
}

나는 SignUpValidationSchema를 export 해왔기 때문에, SignUpValidationSchema로 받았다.

 

여기서 나는 { SignUpValidationSchema } 로 받아 Runtime Error이 떴다.

구조화할당으로 받지 않도록 주의하자!