타입스크립트와 리액트의 폼 관리: Formik과 Yup

byCode Keeper •


타입스크립트와 리액트의 폼 관리: Formik과 Yup


리액트 애플리케이션에서 폼 관리는 중요한 부분입니다. 폼의 상태를 관리하고, 유효성을 검증하며, 사용자 입력을 처리하는 작업은 번거로울 수 있습니다. 이 포스팅에서는 Formik과 Yup을 사용하여 리액트 폼을 타입스크립트로 관리하는 방법을 소개하겠습니다. Formik은 폼 상태와 제출을 관리하는 라이브러리이고, Yup은 폼 데이터의 유효성을 검증하는 라이브러리입니다.


Formik과 Yup의 중요성


Formik과 Yup을 사용하면 폼 상태 관리와 유효성 검증을 간편하게 처리할 수 있습니다. 이를 통해 코드의 가독성을 높이고, 유지보수성을 향상시킬 수 있습니다.


프로젝트 설정 및 라이브러리 설치


Formik과 Yup을 사용하기 위해 필요한 패키지를 설치합니다. 다음 명령어를 사용하여 프로젝트를 생성하고 필요한 패키지를 설치합니다.


npx create-react-app my-formik-yup-app --template typescript
cd my-formik-yup-app
npm install formik yup @types/yup

프로젝트 구조


프로젝트는 기본적으로 다음과 같은 구조를 가집니다.


my-formik-yup-app/
├── src/
│   ├── components/
│   ├── App.tsx
│   ├── index.tsx
├── public/
├── package.json
└── README.md

이제 Formik과 Yup을 사용하여 폼을 관리하는 방법을 살펴보겠습니다.


Formik을 사용한 폼 관리


Formik을 사용하면 폼 상태를 쉽게 관리할 수 있습니다. 기본적인 폼 설정과 폼 상태 관리를 살펴보겠습니다.


기본 폼 설정


먼저, Formik을 사용하여 기본 폼을 설정합니다.


// src/App.tsx
import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

interface FormValues {
  name: string;
  email: string;
  password: string;
}

const initialValues: FormValues = {
  name: '',
  email: '',
  password: '',
};

const validationSchema = Yup.object({
  name: Yup.string().required('이름을 입력하세요'),
  email: Yup.string().email('유효한 이메일을 입력하세요').required('이메일을 입력하세요'),
  password: Yup.string().min(8, '비밀번호는 최소 8자 이상이어야 합니다').required('비밀번호를 입력하세요'),
});

const App: React.FC = () => {
  const handleSubmit = (values: FormValues) => {
    console.log(values);
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>회원가입 폼</h1>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
      >
        <Form>
          <div>
            <label htmlFor="name">이름</label>
            <Field id="name" name="name" placeholder="이름" />
            <ErrorMessage name="name" component="div" />
          </div>
          <div>
            <label htmlFor="email">이메일</label>
            <Field id="email" name="email" placeholder="이메일" type="email" />
            <ErrorMessage name="email" component="div" />
          </div>
          <div>
            <label htmlFor="password">비밀번호</label>
            <Field id="password" name="password" placeholder="비밀번호" type="password" />
            <ErrorMessage name="password" component="div" />
          </div>
          <button type="submit">제출</button>
        </Form>
      </Formik>
    </div>
  );
};

export default App;

위 코드에서는 Formik을 사용하여 기본적인 회원가입 폼을 설정합니다. Field 컴포넌트를 사용하여 입력 필드를 생성하고, ErrorMessage 컴포넌트를 사용하여 유효성 검증 오류 메시지를 표시합니다.


Yup을 사용한 유효성 검증


Yup을 사용하면 폼 데이터의 유효성을 간편하게 검증할 수 있습니다. 앞서 작성한 예제에서는 Yup을 사용하여 폼 데이터의 유효성을 검증했습니다.


유효성 검증 스키마 작성


Yup을 사용하여 유효성 검증 스키마를 작성합니다.


const validationSchema = Yup.object({
  name: Yup.string().required('이름을 입력하세요'),
  email: Yup.string().email('유효한 이메일을 입력하세요').required('이메일을 입력하세요'),
  password: Yup.string().min(8, '비밀번호는 최소 8자 이상이어야 합니다').required('비밀번호를 입력하세요'),
});

위 코드에서는 이름, 이메일, 비밀번호 필드에 대한 유효성 검증 스키마를 작성했습니다.


폼 제출 처리


폼 제출 시, Formik의 handleSubmit 함수를 사용하여 폼 데이터를 처리합니다.


const handleSubmit = (values: FormValues) => {
  console.log(values);
};

위 코드에서는 폼이 제출될 때 values 객체를 콘솔에 출력합니다. 실제 애플리케이션에서는 이를 통해 서버에 데이터를 전송하거나 다른 작업을 수행할 수 있습니다.


스타일링 및 사용자 경험 개선


Formik과 Yup을 사용하여 폼을 스타일링하고, 사용자 경험을 개선할 수 있습니다.


스타일링


CSS를 사용하여 폼을 스타일링할 수 있습니다. 예를 들어, 다음과 같이 기본 스타일을 적용할 수 있습니다.


/* src/App.css */
form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div {
  margin-bottom: 15px;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 300px;
}

button {
  padding: 10px 20px;
  border: none;
  background-color: #4caf50;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

div > div {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

사용자 경험 개선


폼 제출 중 로딩 상태를 표시하거나, 제출 후 성공 메시지를 표시하는 등 사용자 경험을 개선할 수 있습니다.


// src/App.tsx
import React, { useState } from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

interface FormValues {
  name: string;
  email: string;
  password: string;
}

const initialValues: FormValues = {
  name: '',
  email: '',
  password: '',
};

const validationSchema = Yup.object({
  name: Yup.string().required('이름을 입력하세요'),
  email: Yup.string().email('유효한 이메일을 입력하세요').required('이메일을 입력하세요'),
  password: Yup.string().min(8, '비밀번호는 최소 8자 이상이어야 합니다').required('비밀번호를 입력하세요'),
});

const App: React.FC = () => {
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (values: FormValues, { setSubmitting }) => {
    setTimeout(() => {
      console.log(values);
      setSubmitting(false);
      setSubmitted(true);
    }, 1000);
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>회원가입 폼</h1>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
      >
        {({ isSubmitting }) => (
          <Form>
            <div>
              <label htmlFor="name">이름</label>
              <Field id="name" name="name" placeholder="이름" />
              <ErrorMessage name="name" component="div" />
            </div>
            <div>
              <label htmlFor="email">이메일</label>
              <Field id="email" name="email" placeholder="이메일" type="email" />
              <ErrorMessage name="email" component="div" />
            </div>
            <div>
              <label htmlFor="password">비밀번호</label>
              <Field id="password" name="password" placeholder="비밀번호" type="password" />
              <ErrorMessage name="password" component="div" />
            </div>
            <button type="submit" disabled={isSubmitting}>
              {isSubmitting ? '제출 중...' : '제출'}
            </button>
          </Form>
        )}
      </Formik>
      {submitted && <p>폼 제출이 완료되었습니다!</p>}
    </div>
  );
};

export default App;

위 코드에서는 폼 제출 중 로딩 상태를 표시하고, 제출이 완료되면 성공 메시지를 표시합니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 Formik과 Yup을 사용하여 리액트 폼을 타입스크립트로 관리하는 방법에 대해 살펴보았습니다. Formik은 폼 상태 관리와 제출을 간편하게 처리할 수 있으며, Yup은 유효성 검증을 통해 폼 데이터를 검증할 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전