[React] Formik

Formik

Formik은 React의 장황한 form을 3가지 측면에서 도와주는 작은 라이브러리입니다.

 

▪️ form state 안팎에서 값 가져오기
▪️ 유효성 검사 및 오류 메시지
▪️ form submit 처리

 

현재 시점에 비슷한 라이브러리들과의 다운로드 수를 비교해보면 1위를 달리고 있고 formik이 다른 라이브러리들에 비해 성능 측면이나 추론, 리펙토링에서 우위를 점하고 있습니다.

🏷️ 설치

npm install formik

🏷️ 예시 코드

import { Formik, Form, Field, ErrorMessage } from "formik";


export default function TestComponent() {
    // 코드 생략

    function onSubmit(values) {
        // 코드 생략
    }

    function validate(values) {
        // 코드 생략
    }

    return (
        <div className="container">
            <h1>Enter Todo Details</h1>
            <div>
                <Formik initialValues = { { description, targetDate } }
                        onSubmit = { onSubmit }
                        validate = { validate }
                        enableReinitialize = { true }
                        validateOnChange = { false }
                        validateOnBlur = { false }
                >
                    {
                        (props) => (
                            <Form>
                                <ErrorMessage
                                    name = "description"
                                    component = "div"
                                    className = "alert alert-warning"
                                />

                                <ErrorMessage
                                    name = "targetDate"
                                    component = "div"
                                    className = "alert alert-warning"
                                />

                                <fieldset className = "form-group">
                                    <label>Description</label>
                                    <Field type = "text" className = "form-control" name = "description" />
                                </fieldset>
                                <fieldset className = "form-group">
                                    <label>Target Date</label>
                                    <Field type = "date" className = "form-control" name = "targetDate" />
                                </fieldset>
                                <div>
                                    <button className="btn btn-success m-5" type="submit">Save</button>
                                </div>
                            </Form>
                        )
                    }
                </Formik>
            </div>
        </div>
    )
}

✅ Formik 컴포넌트

initialValues는 form의 입력란에 들어갈 value의 초기값입니다. 또한 onSubmit은 제출 시에 실행될 함수이며,

Validate는 해당 폼에서 입력 조건에 따라 실행될 함수입니다.

✅  Form, Field 컴포넌트

<Form>컴포넌트는 html에서 <form>태그와 비슷한 역할을 합니다. 이 컴포넌트 아래 <Field>컴포넌트를 두고 props로 name을 initialValues의 키값으로 세팅하면 우리가 setState를 했던 것과 해당 값을 가져와서 유효성 검사를 하는 것이 모두 자동 설정이 됩니다.

✅  ErrorMessage  컴포넌트

어떤 component에 메시지를 표시할 것인지와 className으로 스타일을 지정해 줄 수 있습니다.

 

📖 Reference

B급코딩