ReactJS - Formik: Expense Form 작성

안녕하세요, 미래의 React 개발자 여러분! 오늘 우리는 React에서 폼을 처리하는 흥미로운 여정을 시작할 것입니다. Formik이라는 훌륭한 라이브러리를 사용하여 폼을 처리해 보겠습니다. 이 튜토리얼이 끝나면, 프로급의 세련된 폼을 만들 수 있을 것입니다. 그럼 시작해 보겠습니다!

ReactJS - Formik

Formik은 무엇인가요?

코딩을 시작하기 전에 Formik이 무엇인지, 그리고 왜 React 개발에서 이렇게 중요한지 이해해 보겠습니다.

Formik은 React 애플리케이션에서 폼 처리를 간소화하는 인기 라이브러리입니다. 폼 상태 관리, 검증, 제출 등 지루한 부분을 처리해 주어, 여러분은 애플리케이션의 로직에 집중할 수 있습니다.

Formik을 개인 폼 어시스턴트라고 생각해 보세요. 좋은 어시스턴트가 모든 서류를 처리해 주는 것처럼, Formik은 모든 폼 관련 작업을 관리하여, 여러분은 더 큰 그림에 집중할 수 있습니다.

프로젝트 설정

먼저 프로젝트를 설정해 보겠습니다. Node.js가 컴퓨터에 설치되어 있는지 확인하세요. 설치되어 있지 않다면, 공식 Node.js 웹사이트에서 설치하십시오.

터미널을 엽치고 다음 명령어를 실행하십시오:

npx create-react-app expense-form-app
cd expense-form-app
npm install formik yup
npm start

이 명령어는 새로운 React 애플리케이션을 생성하고, Formik과 Yup(폼 검증 라이브러리)를 설치하며, 개발 서버를 시작합니다.

Expense Form 생성

이제 프로젝트가 설정되었으므로, Expense Form을 생성해 보겠습니다. 사용자가 지출 내역 설명과 금액을 입력할 수 있는 간단한 폼을 만들겠습니다.

Step 1: 기본 폼 구조

먼저 기본 폼 구조를 만들어 보겠습니다. src/App.js 파일을 엽치고 다음 코드로 대체하십시오:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

function App() {
return (
<div className="App">
<h1>Expense Form</h1>
<Formik
initialValues={{ description: '', amount: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Description</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Amount</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

여기서 일어나는 일을 분해해 보겠습니다:

필요한 Formik 컴포넌트를导입합니다.
Formik 컴포넌트로 폼을 감싸줍니다.
폼 필드의 초기值를 설정합니다.
폼 제출을 처리하는 onSubmit 함수를 정의합니다.
Formik의 Form, Field, ErrorMessage 컴포넌트를 사용하여 폼 구조를 만듭니다.

Step 2: 검증 추가

이제 폼에 검증을 추가해 보겠습니다. Yup을 사용하겠습니다. App.js 파일을 다음과 같이 업데이트하십시오:

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

const ExpenseSchema = Yup.object().shape({
description: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
amount: Yup.number()
.positive('Must be positive')
.required('Required'),
});

function App() {
return (
<div className="App">
<h1>Expense Form</h1>
<Formik
initialValues={{ description: '', amount: '' }}
validationSchema={ExpenseSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Description</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Amount</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

추가한 내용을 요약하자면:

Yup을导입하고 검증 스키마(ExpenseSchema)를 정의합니다.
Formik 컴포넌트에 validationSchema 속성을 추가합니다.

이제 폼이 제출되기 전에 입력을 검증합니다!

Step 3: 폼 스타일링

폼에 기본 스타일을 추가하여 더 예쁜的外观을 만들어 보겠습니다. src 폴더에 App.css 파일을 생성하고 다음 CSS를 추가하십시오:

.App {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #333;
}

form {
display: flex;
flex-direction: column;
}

div {
margin-bottom: 15px;
}

label {
margin-bottom: 5px;
display: block;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:disabled {
background-color: #ddd;
}

.error {
color: red;
font-size: 0.8em;
}

이제 App.js 파일에 CSS 파일을导입합니다:

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

// ... 나머지 코드는 동일합니다

결론

축하합니다! 여러분은 Formik과 React를 사용하여 기능적인 지출 내역 폼을 만들었습니다. Formik을 사용할 수 있는 것은 시작에 불과합니다. React 여정을 계속하면서, 여러분은 Formik이 모든 복잡성의 폼을 처리하는 데 귀중한 도구임을 발견할 것입니다.

기억하십시오, 연습이 완벽을 이루는 열쇠입니다. 이 폼을 수정해 보세요, 새로운 필드를 추가하거나, 배운 내용을 사용하여全新的 폼을 만들어 보세요. React 개발의 세계는 방대하고 흥미롭며, 여러분은 그 안으로 잘 진입하고 있습니다!

행복하게 코딩하세요, 폼이 항상 무사히 검증되기를 바랍니다! ?

Formik 메서드 표

여기에 몇 가지 일반적으로 사용되는 Formik 메서드 표가 있습니다:

메서드	설명
`handleSubmit`	폼 제출을 처리합니다
`handleChange`	폼 필드의 변경을 처리합니다
`handleBlur`	필드가 포커스를 잃을 때 처리합니다
`setFieldValue`	필드 값을 수동으로 설정합니다
`setFieldTouched`	필드의 터치 상태를 수동으로 설정합니다
`validateForm`	폼 검증을 수동으로触发합니다
`resetForm`	폼을 초기值로 재설정합니다
`setErrors`	폼 오류를 수동으로 설정합니다
`setStatus`	최상위 상태 객체를 설정합니다
`setSubmitting`	폼 제출 상태를 설정합니다

이 메서드들은 여러분이 폼의 동작과 상태를 세밀하게 제어할 수 있도록 합니다. Formik을 더 익숙해지면서, 여러분은 이 메서드들을 사용하여 더 복잡하고 상호작용적인 폼을 만들 것입니다.

Credits: Image by storyset