페코옹
553
2020-10-14 23:20:48 작성 2020-10-15 11:14:07 수정됨
1
696

react 입력 form 간단하게 만들기



사용자에게 입력을 받고 값을 검증하는 코드를 짜는건 굉장히 귀찮은 일입니다.


사용자가 입력을 했는지 확인해야하고, 이메일 검증 해야 하고, 패스워드 일치 하는지 봐야하고 등등...


일일이 이걸 코드로 작성하다 보면 코드가 굉장히 길어지는 걸 겪으셨을 겁니다.


이런 일들을 두가지 라이브러리들을 이용해 정말 굉장히 간단하게 처리할 수 있습니다.


1. form 형태의 입력을 쉽게 처리해주는 라이브러리인 formik

2. 아주 간단한 객체 스키마 검증 라이브러리인 yup


예시로 간단하게 회원가입을 구현한 코드입니다. 

https://codesandbox.io/s/suspicious-violet-wzrso


import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import "./styles.css";

export default () => {
return (
<div className="App">
<Formik
initialValues={{
name: "",
email: "",
password: "",
passwordConfirm: ""
}}
validationSchema={Yup.object().shape({
name: Yup.string()
.min(3, "너무 짧습니다.")
.max(10, "너무 깁니다.")
.required("이름을 입력하세요"),
email: Yup.string()
.email("이메일을 정확히 입력하세요")
.min(8, "너무 짧습니다.")
.required("이메일을 입력하세요"),
password: Yup.string()
.min(8, "너무 짧습니다.")
.required("비밀번호를 입력하세요"),
passwordConfirm: Yup.string()
.oneOf([Yup.ref("password"), null], "패스워드가 일치하지 않습니다.")
.required("비밀번호를 입력하세요")
})}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form className="form">
<div className="label">이름</div>
<Field type="name" name="name" className="input" />
<ErrorMessage name="name" component="div" className="err" />
<div className="label">이메일</div>
<Field type="email" name="email" className="input" />
<ErrorMessage name="email" component="div" className="err" />
<div className="label">비밀번호</div>
<Field type="password" name="password" className="input" />
<ErrorMessage name="password" component="div" className="err" />
<div className="label">비밀번호 확인</div>
<Field type="password" name="passwordConfirm" className="input" />
<ErrorMessage
name="passwordConfirm"
component="div"
className="err"
/>
<button type="submit" disabled={isSubmitting}>
회원가입
</button>
</Form>
)}
</Formik>
</div>
);
};


1
  • 댓글 1

  • Frudy
    5k
    2020-10-15 19:43:20

    기초 폼 컨트롤부터 다 익히고 나서는, 이거 써봐야겠어요 감사합니다!

  • 로그인을 하시면 댓글 을 등록할 수 있습니다.