✨ react-cool-form 소개: 양식 상태 및 유효성 검사를 위한 React 후크, 더 적은 코드 성능

React에서 양식을 작성하는 것은 어려울 수 있습니다. 양식 데이터, 유효성 검사, 제출 등과 같은 많은 지루한 일에 직면해야 합니다 🤯.

React 개발자로서 controlled components 및 uncontrolled components 형식을 구현하기 위한 두 가지 전략이 있으며 각각 장점과 사용 시기가 있습니다. 제어되는 구성 요소는 형태 상태를 the single source of truth으로 제공합니다. 그러나 제어되지 않는 구성 요소는 코드를 더 간결하고 성능 있게 만듭니다.

React Cool Form은 이러한 장점을 결합하고 UX research의 Nielsen Norman Group을 우리의 API 디자인의 기초로 참조하여 모든 종류의 양식을 정복하도록 돕습니다 👊🏻.

특징

🎣 Easy to use , React Cool Form은 모든 종류의 형태를 정복할 수 있도록 도와주는 a set of React hooks입니다.

🗃 번거로움 없이 complex form data 관리합니다.

🪄 arrays and lists 데이터를 마스터처럼 관리합니다.

🚦 built-in , form-level 및 field-level 유효성 검사를 지원합니다.

🚀 당신을 위한 고성능 minimizes the number of re-renders.

🧱 기존 HTML 양식 입력과의 원활한 통합 또는 3rd-party UI libraries .

🎛 API을 염두에 두고 제작된 매우 유연한 DX and UX 디자인.

🔩 양식 개발을 촉진하는 데 유용한utility functions을 제공합니다.

📜 TypeScript 유형 정의를 지원합니다.

☁️ 서버 측 렌더링 호환성.

🦔 A tiny size ( ~ 7.2kB gizpped ) 라이브러리이지만 강력합니다.

빠른 시작

React Cool Form을 사용하려면 Hooks가 포함된 [email protected] 이상을 사용해야 합니다. 이 패키지는 npm을 통해 배포됩니다.

$ yarn add react-cool-form
# or
$ npm install --save react-cool-form

이것이 흔들리는 방식에 대한 기본 개념은 다음과 같습니다.

import { useForm } from "react-cool-form";

const Field = ({ label, id, error, ...rest }) => (
  <div>
    <label htmlFor={id}>{label}</label>
    <input id={id} {...rest} />
    {error && <p>{error}</p>}
  </div>
);

const App = () => {
  const { form, mon } = useForm({
    // (Strongly advise) Provide the default values just like we use React state
    defaultValues: { username: "", email: "", password: "" },
    // The event only triggered when the form is valid
    onSubmit: (values) => console.log("onSubmit: ", values),
  });
  // We can enable the "errorWithTouched" option to filter the error of an un-blurred field
  // Which helps the user focus on typing without being annoyed by the error message
  const errors = mon("errors", { errorWithTouched: true }); // Default is "false"

  return (
    <form ref={form} noValidate>
      <Field
        label="Username"
        id="username"
        name="username"
        // Support built-in validation
        required
        error={errors.username}
      />
      <Field
        label="Email"
        id="email"
        name="email"
        type="email"
        required
        error={errors.email}
      />
      <Field
        label="Password"
        id="password"
        name="password"
        type="password"
        required
        minLength={6}
        error={errors.password}
      />
      <input type="submit" />
    </form>
  );
};

✨ 꽤 쉽죠? React Cool Form은 생각보다 강력합니다. 렛츠explore it !