React에서 Formik으로 폼 관리하기

React 애플리케이션에서 사용자 입력을 다루는 것은 필수적입니다. 사용자가 폼을 통해 데이터를 입력할 때, 이를 효과적으로 관리하고 검증하는 것이 중요합니다. Formik은 React에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리로, 상태 관리 및 유효성 검사를 간편하게 처리할 수 있습니다. 이번 글에서는 Formik의 기본 사용법과 함께 실제 예제를 통해 폼을 관리하는 방법을 알아보겠습니다.

Formik 설치하기

Formik을 사용하기 위해서는 먼저 라이브러리를 설치해야 합니다. npm 또는 yarn을 이용해 설치할 수 있습니다.

npm install formik

또는

yarn add formik

기본 사용법

Formik을 사용하여 기본적인 폼을 만드는 방법을 살펴보겠습니다. 아래는 사용자 이름과 이메일을 입력받는 간단한 폼 컴포넌트입니다.

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const MyForm = () => {
    const initialValues = {
        username: '',
        email: '',
    };

    const validationSchema = Yup.object({
        username: Yup.string()
            .min(2, '최소 2자 이상 입력해야 합니다.')
            .required('사용자 이름은 필수 항목입니다.'),
        email: Yup.string()
            .email('유효한 이메일 주소를 입력해야 합니다.')
            .required('이메일은 필수 항목입니다.'),
    });

    const onSubmit = (values) => {
        console.log(values);
    };

    return (
        <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={onSubmit}
        >
            <Form>
                <div>
                    <label htmlFor="username">사용자 이름</label>
                    <Field name="username" type="text" />
                    <ErrorMessage name="username" component="div" />
                </div>
                <div>
                    <label htmlFor="email">이메일</label>
                    <Field name="email" type="email" />
                    <ErrorMessage name="email" component="div" />
                </div>
                <button type="submit">제출</button>
            </Form>
        </Formik>
    );
};

export default MyForm;

코드 설명

  1. Formik, Form, Field, ErrorMessage: Formik에서 제공하는 컴포넌트로, 각각의 역할은 다음과 같습니다.

    2. - Formik: 폼의 상태를 관리합니다. - Form: 폼의 구조를 정의합니다. - Field: 각 입력 필드를 나타냅니다. - ErrorMessage: 유효성 검사에서 발생한 오류 메시지를 표시합니다.

  2. initialValues: 폼의 초기 값을 설정합니다.
  3. validationSchema: Yup 라이브러리를 사용하여 유효성 검사 규칙을 정의합니다. 사용자 이름은 최소 2자 이상이어야 하고, 이메일은 유효한 형식이어야 합니다.
  4. onSubmit: 폼이 성공적으로 제출되었을 때 호출되는 함수입니다. 여기서는 콘솔에 입력된 값을 출력합니다.

    5. 더 복잡한 폼 다루기

    Formik은 기본적인 폼 외에도 더 복잡한 폼 관리도 지원합니다. 예를 들어, 동적인 필드 추가 및 삭제를 구현할 수 있습니다. 아래의 예제에서는 사용자가 입력한 전화번호를 동적으로 추가할 수 있는 폼을 구현해보겠습니다.

    import React from 'react';
import { Formik, Form, Field, FieldArray, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const DynamicForm = () => {
    return (
        <Formik
            initialValues={{ phoneNumbers: [''] }}
            validationSchema={Yup.object({
                phoneNumbers: Yup.array().of(
                    Yup.string()
                        .required('전화번호는 필수 항목입니다.')
                        .matches(/^\d{2,3}-\d{3,4}-\d{4}$/, '전화번호 형식이 잘못되었습니다.')
                )
            })}
            onSubmit={values => {
                console.log(values);
            }}
        >
            {({ values }) => (
                <Form>
                    <FieldArray name="phoneNumbers">
                        {({ push, remove }) => (
                            <div>
                                {values.phoneNumbers.map((_, index) => (
                                    <div key={index}>
                                        <Field
                                            name={phoneNumbers.${index}}
                                            placeholder="전화번호 입력"
                                        />
                                        <ErrorMessage name={phoneNumbers.${index}} component="div" />
                                        <button type="button" onClick={() => remove(index)}>
                                            삭제
                                        </button>
                                    </div>
                                ))}
                                <button type="button" onClick={() => push('')}>
                                    전화번호 추가
                                </button>
                            </div>
                        )}
                    </FieldArray>
                    <button type="submit">제출</button>
                </Form>
            )}
        </Formik>
    );
};

export default DynamicForm;

    코드 설명

  5. FieldArray: 동적 배열 필드를 관리할 수 있게 해줍니다. 사용자가 전화번호를 추가하고 삭제할 수 있는 기능을 제공합니다.
  6. push 및 remove: 각각 새로운 요소를 추가하거나 기존 요소를 삭제하는 함수입니다.
  7. validationSchema: 전화번호 형식을 정규 표현식을 사용하여 검증합니다.

마무리

Formik은 React에서 폼 관리의 복잡성을 크게 줄여주는 강력한 도구입니다. 기본적인 사용법부터 시작하여, FieldArray를 이용한 동적 폼 관리까지 다양한 기능을 제공하므로, 필요한 형태에 맞추어 유연하게 사용할 수 있습니다. 기본적인 폼과 복잡한 폼을 모두 다룰 수 있는 Formik을 통해 폼 작업의 효율성을 높여보세요.