React TypeScript Hooks : Formik, Yup 및 Material-UI를 사용한 양식 유효성 검사

Unsplash에 Artem Sapegin의 사진

양식은 모든 응용 프로그램의 필수 구성 요소이므로 양식 작성이 매우 간단한 작업이라는 것이 좋습니다.

처리하기 가장 쉬운 유형의 양식은 총 필드 수가 적은 양식입니다. 양식 유효성 검사를 추가해야 할 때 상황이 조금 더 까다로워 지지만 올바른 접근 방식으로 상당히 쉽게 수행 할 수 있습니다.

JavaScript로 양식 유효성 검사를 처리하는 방법에는 여러 가지가 있습니다. 일부 접근 방식에서는 사용자가 양식을 제출하면 모든 오류 메시지가 한 번만 표시되지 않습니다. 그것은 사용자에게 실망 스러울 것입니다. 이를 방지하기 위해 양식의 모든 필수 필드를 한 번에 강조 표시하는 것이 좋습니다. React에서 이러한 설정을 활성화하기 위해 React 클래스 기반 구성 요소로 설명되는 많은 패키지가 있습니다.

이 포스트에서는 React TypeScript : Hooks based components 에 초점을 맞출 것 입니다. 양식 유효성 검사를 위해, 우리의 조합을 사용합니다 Formik와 그래 , 및 재료 - UI를 양식 요소.

Formik

긴 형식에서는 값, 오류 및 방문한 필드를 추적 한 다음 유효성 검사를 조정하는 것이 번거로울 수 있습니다. 사용자들은 Formik가 제공됩니다. Formik 수단을 사용하여 우리는 그 대신에, 우리는 논리에 더 많은 시간을 보낼 수있는 등 약간의 시간 관리 상태, 처리 오류, 변경 핸들러를 보낼 것입니다.

Material-UI

Formik은 필드를 제공하지만 이러한 필드를 스타일링하는 데 가장 적합한 도구는 아닙니다. Material-UI 가 이에 대한 해결책입니다. Material-UI는 잘 디자인되고 우아한 입력 필드와 구조를 제공하므로 시간을 훨씬 더 절약 할 수 있습니다. 라디오 버튼, 확인란, 선택 등에 대한 구문을 확인하십시오.https://material-ui.com/.

Formik에는 유효성 검사 속성이 validate있습니다. 그러나 더 많은 규칙이 추가되면 구문과 코드 줄이 매우 길어지며 때로는 읽기가 어려워집니다. YupvalidationSchemaFormik 속성 인에 사용할 깨끗하고 간단한 유효성 검사 개체를 제공하는 스키마 작성기입니다 . 스키마에 대한 더 많은 옵션을 보려면 다음을 방문하십시오.https://github.com/jquense/yup.

필요한 모든 패키지를 설치하여 시작하겠습니다. 다음은 명령입니다.

yarn add formik @ material-ui yup @ types / yup

모든 패키지가 설치되면 패키지에서 필요한 모든 구성 요소를 가져 오겠습니다.

import {Grid, TextField, Button, makeStyles, createStyles, Theme,} from '@ material-ui /
core'import {Formik, Form, FormikProps} from 'formik'import
* as Yup from 'yup'

makeStyles, createStyles, Theme선택적 수입입니다. 여기서는 인라인 스타일링에 사용했습니다.

Formik의 세 가지 속성 을 사용할 것 initialValues, onSubmit and validationSchema입니다. 데모 목적으로 가입 양식을 사용했습니다. 따라서 validationSchema양식에 모든 필수 필드가 포함되도록 몇 가지 규칙이 있습니다. API를 호출하고 양식을 재설정하기 위해 onSubmit호출 createUser()합니다.

위에서 언급했듯이 Formikvalidate속성을 제공 하지만 복잡성을 줄이기 위해 Yup을 사용하고 있습니다. 여기에 약간의 비교가 있습니다.

FormikProps양식 필드를 렌더링하고 바인딩하는 데 사용 합니다. 이 렌더링은 양식의 구조를 정의합니다. FormikProps많은 props것이 있지만 우리는 values, touched, errors, handleBlur, handleChange, isSubmitting.

가입 양식을 참조하여 예제 코드 스 니펫을 만들고 양식 createUser제출시 트리거 되는 모의 함수 를 추가했습니다 . 또한 states양식 상태 성공 또는 오류를 처리하기 위해 몇 가지 추가 기능 을 추가 했습니다.

더 이상 고민하지 않고 React-TypeScript 에서 Formik , YupMaterial-UI 를 사용하는 가입 양식에 대한 완전한 코드가 있습니다 .

전체 코드 스 니펫을 복사하여 붙여넣고 구성 요소를 가져온 다음 브라우저에서 확인할 수 있습니다. TypeScript를 사용하지 않는 경우 인터페이스를 제거 할 수 있습니다.

위의 코드 스 니펫을 실행하면 다음과 같은 출력이 표시됩니다.

결론

위의 접근 방식을 사용하면 값, 오류 또는 터치 된 필드 처리에 대해 걱정할 필요가 없습니다. 그것들은 모두 Formik에 의해 처리됩니다 . 이 양식을 재사용 할 때 기억해야 할 단계는 다음과 같습니다.

  1. 에서 양식 필드의 상태를 업데이트합니다 initialValues.
  2. inputFields요구 사항에 따라 업데이트 하십시오.
  3. 각 입력 필드의 이름, ID, 값 등을 업데이트합니다.
  4. 양식 제출시 트리거 할 기능을 추가하십시오.
  1. Formik : https://jaredpalmer.com/formik/docs/overview
  2. Material-UI : https://material-ui.com/
  3. 예: https://github.com/jquense/yup

감사!

Suggested posts

React 자습서가 가르치지 않는 5 가지 주요 교훈

React 자습서가 가르치지 않는 5 가지 주요 교훈

React 개발자가 알아야 할 필수 개념과 교훈이 많이 있지만 대부분의 튜토리얼에서는 다루지 않습니다. 나는 당신이 알아야 할 가장 중요한 주제 중 일부를 직접 골랐지만, 자세히 다루기 위해 시간을 할애 한 기사는 거의 없습니다.

Redux 툴킷에 대한 간단한 가이드

configureStore에서 createSlice로

Redux 툴킷에 대한 간단한 가이드

소개 Redux는 저장소와 감속기를 사용하여 애플리케이션의 전역 상태를 관리하는 Javascript 라이브러리입니다. 프론트 엔드 프레임 워크 'React'는 상태 관리에 매우 능숙하기 때문에 Redux와 React는 서로에게 완벽하게 맞습니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.