React에서 빠르게 양식을 작성하는 방법

양식은 웹 앱의 모든 곳에 있습니다. 로그인하거나 소셜 미디어에 글을 올리거나 온라인에서 물건을 구매할 때마다 양식을 사용하고 있습니다.

편재성에도 불구하고 양식을 구축하려면 많은 관심과 주의가 필요합니다. 양식 필드는 특정 유형의 데이터만 허용하고 유효성 검사를 수행하며 잘못된 입력에 대한 오류를 표시해야 합니다. 더 많은 필드가 추가될수록 양식의 복잡성이 커집니다.

이 작업은 반복적이고 피곤합니다. 양식 작성을 사소하게 만들 수 있다면 좋지 않을까요?

RJSF 입력

나는 tried lots of form libraries 을 했지만 RJSF만큼 쉽고 빠른 형태 구축의 부담을 해결해 준 것은 없습니다.

양식을 어렵게 만드는 것은 JSX, 상태, 유효성 검사 및 오류 관리입니다. 더 많은 필드를 추가함에 따라 앞서 언급한 항목을 더 많이 관리해야 하므로 빠르게 처리할 수 없습니다.

RJSF는 선언적 양식 작성자가 되어 이 문제를 해결합니다. 양식 및 유효성 검사 논리를 수동으로 정의하는 대신 json-schema을 사용하여 양식을 설명하면 RJSF가 나머지를 처리합니다.

저는 고객과 함께 생산에 사용하여 큰 효과를 얻었습니다. 작동 방식을 보여주기 위해 빠른 가입 양식을 만들 것입니다. json-schema에 익숙하면 도움이 되므로 5 minute primer이 있습니다.

가입 양식 만들기

먼저 사용자의 이메일과 비밀번호를 수집해야 합니다. RJSF 반응 코드는 다음과 같습니다.

<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
      },
      password: {
        type: "string"
      }
    }
 }}
/>

이 작은 코드에서 RJSF는 제목, 텍스트 입력 및 제출 버튼을 만들었습니다. 멋지지만 아직 멀었습니다. 우리가 할 수 있는 몇 가지 개선 사항:

이메일 및 암호 필수 필드 만들기

최소 암호 길이 적용

이메일 필드는 이메일만 수락해야 함

암호 입력이 난독화되어야 함

이것들을 추가합시다.

이메일 및 비밀번호 필수 입력란 만들기:

<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
         },
      password: {
        type: "string"
      },
    },
    required: ["email", "password"]
  }}
/>

최소 암호 길이 적용

<Form
  schema={{
  title: "Signup",
  properties: {
    email: {
      type: "string"
    },
    password: {
      type: "string",
      minLength: 8
    },
  },
  required: ["email", "password"]
}}
/>

이메일 필드는 이메일만 수락해야 합니다.

<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
      },
      password: {
        type: "string",
        minLength: 8
      },
    },
    required: ["email", "password"]
  }}
  uiSchema={{
    "email": {
      "ui:widget": "email"
    }
  }}
/>

암호 입력 자체를 난독화해야 합니다.

<Form
  schema={{
    title: "Signup",
    properties: {
      email: {
        type: "string"
      },
      password: {
        type: "string",
        minLength: 8
      },
    },
    required: ["email", "password"]
  }}
  uiSchema={{
    "email": {
      "ui:widget": "email"
    },
    "password": {
      "ui:widget": "password"
    }
  }}
/>

최종 결과는 다음과 같습니다( View the code here .)

RJSF는 HTML 기본 오류 처리와 사용자 지정 JS 오류 처리를 지원합니다.

RJSF는 또 무엇을 할 수 있습니까?

이것은 단지 표면을 긁는 것입니다. RJSF는 훨씬 더 많은 것을 제공합니다.

테마

chakra, semantic-ui, material design 및 more과 같은 인기 있는 라이브러리를 기본적으로 지원합니다.

복잡한 필드

다중 선택 드롭다운, 확인란, 구성 가능한 목록 등이 즉시 지원됩니다. 필요한 경우 직접 만들 수도 있습니다custom form fields.

사용자 지정 유효성 검사 및 오류

양식에 사용자 지정 유효성 검사를 추가합니다. 다음은 사용자 지정 "비밀번호 일치"유효성 검사입니다.

<Form 
  validate={(formData, errors) => {
    if (formData.pass1 !== formData.pass2) {
      errors.pass2.addError("Passwords don't match");
    }
    return errors;
  }}
  schema={{
    type: "object",
    properties: {
      pass1: {type: "string", minLength: 3},
      pass2: {type: "string", minLength: 3},
    }
  }}
/>

RJSF 단점은 무엇입니까?

RJSF는 훌륭하지만 다음과 같은 단점도 있습니다.

번들 크기
RJSF 코어 패키지는 0.25MB로 대용량입니다! 자세히 살펴보면 you can see that 33% of the bundle is attributed to the AJV JSON Schema validation library . 관리자는 다음 릴리스에서 removing this dependency에 대해 작업하고 있습니다.

큰 양식이 느림
저는 50개 이상의 옵션이 있는 드롭다운을 만들 때 이것을 직접 확인했습니다. 이 때문에 내 양식이 매우 느 렸습니다. 옵션을 ~15로 줄이면 문제가 해결되는 것 같습니다.

RJSF는 양식이 수집하는 데이터를 아직 파악 중이라면 환상적입니다. 그러나 문서에는 "데이터에 대한 사전 지식이 있고 이를 위한 양식을 생성하기 위한 툴킷이 필요한 경우 다른 곳을 살펴보는 것이 좋습니다"라고 언급되어 있습니다.

결론

이것은 빠른 양식 개발을 위해 내가 가장 좋아하는 반응 라이브러리인 RJSF에 대한 빠른 다이빙이었습니다.

사용해 보고 싶다면 check out this playground . 여기에는 RJSF의 힘을 보여주는 수많은 예가 있습니다. 당신이 그것을 파고 있다면, GitHub ⭐에 별표를 줘서 메인테이너를 도와주세요.

게시물The Best React Form Library (2022)은 💻 Web Dev With Seb에 처음 등장했습니다.