블로그

May 09, 2023

React Hook Form을 사용하여 React에서 양식을 작성하는 방법

최소한의 노력으로 React 양식을 구축하고 검증하세요. 건물

최소한의 노력으로 React 양식을 구축하고 검증하세요.

React 애플리케이션에서 양식을 작성하는 것은 복잡하고 시간이 많이 걸릴 수 있습니다. React Hook Form 라이브러리의 도움으로 React 애플리케이션에 고성능 양식을 쉽게 추가할 수 있습니다.

React Hook Form은 복잡하고 재사용 가능한 양식을 만드는 과정을 단순화하는 React에서 양식을 작성하기 위한 라이브러리입니다. React 앱을 구축하려는 경우 React Hook Form 라이브러리를 사용하여 React에서 양식을 구축하는 방법을 배워야 합니다.

React Hook Form 사용을 시작하려면 npm 또는 Yarn 패키지 관리자를 사용하여 설치해야 합니다.

npm을 사용하여 React Hook Form을 설치하려면 터미널에서 다음 명령을 실행하세요.

Yarn을 사용하여 React Hook Form을 설치하려면 다음 명령을 실행하세요.

React Hook Form을 사용하여 양식을 생성하려면 다음을 활용해야 합니다.사용양식 훅. 그만큼사용양식Hook을 사용하면 React 애플리케이션에서 양식을 작성하고 관리하는 데 사용할 메서드와 속성에 액세스할 수 있습니다.

다음은 사용 방법을 보여주는 예입니다.사용양식훅:

React Hook Form 라이브러리는등록하다 입력 값을 후크에 등록하는 방법입니다. 그만큼등록하다메소드는 양식의 입력 필드를 React Hook Form 라이브러리에 연결하여 라이브러리가 입력 필드를 추적하고 유효성을 검사할 수 있도록 합니다.

위의 코드 블록에서는 이름이 'firstname'인 입력을 등록합니다. 그만큼핸들제출React Hook Form 라이브러리의 메소드는 양식 제출을 처리합니다.

양식 제출을 처리하기 위해 콜백 함수를 전달합니다.제출 시~로핸들제출 방법. 그만큼제출 시함수는 모든 양식 입력 값을 포함하는 객체를 받습니다.

그만큼등록하다 방법을 사용하면 입력 필드에 대한 유효성 검사 규칙을 설정할 수 있습니다. 입력 필드에 유효성 검사를 추가하려면 유효성 검사 규칙이 있는 객체를 두 번째 인수로 전달합니다.등록하다방법.

다음과 같습니다:

이 예에서는 "firstname" 입력 필드에 유효성 검사 규칙을 추가하고 "password"에 두 가지 유효성 검사 규칙을 추가합니다. 그만큼필수의규칙은 사용자가 입력 필드를 채워야 하며 필드가 비어 있으면 양식을 제출할 수 없도록 지정합니다.

그만큼최대 길이 규칙은 입력 값의 최대 알파벳 문자 수를 설정합니다. 이외에도필수의그리고최대 길이메서드에는 다음과 같은 다른 유효성 검사 규칙을 추가할 수 있습니다.분,최대,최소 길이,무늬, 그리고확인.

그만큼분규칙은 입력 필드의 최소값을 지정하고최대규칙은 최대값을 지정합니다.

당신은 사용할 수 있습니다분그리고최대다음과 같이 숫자 유형 입력이 있는 규칙:

위 입력 필드의 값은 18 이상 35 이하여야 합니다.

그만큼최소 길이규칙은 다음과 유사합니다.최대 길이대신에 최소 알파벳 문자 수를 설정합니다.

이 예에서 minLength 규칙은 입력 값의 길이가 10자 이상이어야 함을 지정합니다.

그만큼무늬 규칙은 입력 값이 일치해야 하는 정규식 패턴을 지정합니다. 그만큼확인 규칙을 사용하면 입력 값의 유효성을 검사하는 사용자 지정 유효성 검사 함수를 정의할 수 있습니다. 함수는 다음 중 하나를 반환해야 합니다.진실또는 문자열 오류 메시지.

예를 들어:

이 예에서 "firstname" 입력은무늬 규칙. 그만큼무늬입력 값에는 알파벳 문자(대문자 및 소문자)만 포함되어야 합니다.

"테스트" 입력은 다음을 사용합니다.확인값이 12보다 작거나 같은지 확인하는 사용자 정의 유효성 검사 함수를 정의하는 규칙입니다.