마지막으로 필요한 반응 양식 라이브러리

오랜만에 즐겨보는 양식 라이브러리인 the mighty react-hook-form 에 대한 빠른 가이드를 공유해야겠다고 생각했습니다.

라이브러리 사용 방법을 보여주는 대신 라이브러리의 주요 이점을 보여주는 작은 실험을 해 보겠습니다.

성능 문제

이 간단한 양식, 두 개의 입력 및 제출 버튼이 있습니다.

import { useState } from "react";

import "./styles.css";

export default function App() {

  return (
    <div className="App">
      <h1>Form</h1>
      <form>
        <label htmlFor="name">name</label>
        <input
          id="name"
          type="text"
        />
        <label htmlFor="age">age</label>
        <input
          id="age"
          type="number"
        />
        <button type="submit">submit</button>
      </form>
    </div>
  );
}

상태 접근

먼저 상태를 사용하여 제어된 형식을 반응으로 만들 때 널리 사용되는 접근 방식을 사용합니다.

이름과 연령에 대한 두 가지 상태를 만들고 이를 사용하여 입력 값을 제어해 보겠습니다.

또한 결과 값을 설정한 다음 표시하는 함수onSubmit를 추가합니다.

우리의 작은 실험을 위해 내부에서 발생하는 재렌더링의 양을 알고 싶습니다. 컴포넌트 외부에 리렌더링 횟수를 저장할 변수를 추가해 보겠습니다.

최종 결과!



작동 중인 코드를 보려면 샌드박스를 엽니다.

좋아, 그것은 많은 재 렌더링입니다 :(

이 작은 형태에서는 어떤 성능 문제도 발견하지 못하겠지만 현실적으로 현재 접근 방식은 확장성이 매우 낮습니다. 입력을 계속 추가하면 몇 가지 중요한 성능 문제를 발견할 것입니다.

react-hook-form 접근법

react-hook-form가 링에 들어갈 시간입니다.



이 라이브러리로 동일한 양식을 복제해 봅시다.
useForm 후크만 있으면 register 함수를 확장하고 handleSubmit 함수로 제출을 처리할 수 있습니다.

당신이 그것을 볼 때 이것은 모두 의미가 있습니다. 여기 있습니다.



작동 중인 코드를 보려면 샌드박스를 엽니다.

단 하나의 외로운 렌더링, 초기 렌더링.

이미 react-hook-form의 장점과 양식을 훨씬 더 잘 확장하는 데 어떻게 도움이 되는지 알 수 있을 것입니다.

어떻게?

그렇다면 다시 렌더링할 필요 없이 값을 추적하는 방법은 무엇입니까?

두 가지 개념에서 ref 및 제어되지 않은 입력입니다.

첫 번째 양식에서 우리는 양식의 값을 추적하기 위해 상태에 의존하므로 값을 업데이트해야 할 때마다 상태도 업데이트되어야 하므로 다시 렌더링해야 합니다. react-hook-form 대신 ref를 사용하여 값을 저장하고 다시 렌더링하지 않고 업데이트할 수 있습니다. 이 접근 방식에서는 입력 값을 제어할 필요가 없으므로 입력이 제어되지 않는다고 합니다.

마무리

성능은 react-hook-form 의 주요 기능이지만 유효성 검사 및 오류 처리와 같이 직접 보고 탐색할 수 있는 더 많은 기능이 있습니다.

예를 들어



여러분 중 일부는 이 유효성 검사가 기본적으로 입력 소품으로 수행될 수 있다는 의견을 쓰려고 한다는 것을 알고 있습니다. 그것은 사실이지만 오류를 표시하기 위해 사용자 정의가 필요한 순간 ​​다른 것을 구현해야 합니다. 또한 이 라이브러리를 사용하여 훨씬 더 많은 유효성 검사 및 기타 기능을 구현할 수 있습니다.

이것이 도움이 되었기를 바라며, 아직 해보지 않았다면 이 훌륭한 라이브러리를 사용해 보고 가능하다면 그들을 지원하십시오.

도움이 되셨다면 다음 시간까지 좋아요와 공유 부탁드립니다.