1) 리액션 후크 형상이란?

응답 후크 양식(TypeScript)

React Hook Form은 TypeScript로 구축되었으며 FormData 유형을 정의하여 양식 값을 지원할 수 있습니다.

⇒ React에서 양식 작업을 위한 최고의 라이브러리

사용자 친화적인 유효성 검사가 포함된 강력하고 유연하며 확장 가능한 양식입니다.

즉, 많은 양식을 관리해야 하거나, 검증 과정을 거치는 시간과 코드를 절약할 수 있습니다

React-Hook-Form에는 양식에서 사용할 수 있는 많은 기능이 있습니다. 상태와우, 데이터 유형과 조건을 확인하고 있습니다. 확인 과정을 줄여라!

1-1) 리액션 훅 형상을 사용하지 않는 경우

1-2) 리액션 훅 형상 사용 시

위와 같이 useForm가져온 후 후크가 호출됩니다. 등록하다 함수를 사용하여 state(toDo), onChange 이벤트 등을 재정의할 수 있습니다!

2) 등록 기능

등록: (이름: 문자열, RegisterOptions?) => ({ onChange, onBlur, 이름, 참조 })

이 방법으로 입력을 등록하거나 항목을 선택하고 유효성 검사 규칙을 react-hook 양식에 적용할 수 있습니다.

유효성 검사 규칙은 모두 HTML 표준을 기반으로~와 함께 사용자 정의 검증 방법(validate, setError)또한 허용

useForm 후크는 상태 및 onChange 이벤트 핸들러가 필요하지 않은 ‘등록’ 기능을 제공합니다.

확산 연산자(…) : 반복 가능한 객체에 적용할 수 있는 구문입니다. 배열 또는 문자열 압축 풀기
각 요소를 확장할 수 있습니다.

사용하는 방법 : 입력의 prop으로 객체를 생성하고 그 안에 register 함수를 배포(…)합니다.

⇒ register 함수에 의해 반환된 객체가 가져와 입력에 대한 prop으로 전달됩니다. 즉, 레지스터는 상태를 생성합니다!

함수 반환 값 등록: { name(Value) / onBlur 이벤트 / onChange 이벤트 / ref }

onFocus : 포커스를 받았을 때 이벤트 설정
onBlur : 포커스 해제 시 이벤트 설정

3) 시계 기능

감시: (이름?: 문자열 | 문자열() | (데이터, 옵션) => 무효) => 알 수 없음

입력 변경 사항을 구독합니다. 이 방법 주어진 입력을 모니터링하고 해당 값을 반환합니다.

입력 값을 렌더링하고 조건에 따라 무엇을 렌더링할지 결정하는 데 유용합니다.

시계가 뭐야 폼 입력 값의 변화를 관찰할 수 있는 기능오전.

위와 같이 watch 함수는 현재 관리되는 양식의 상태 값을 포함하는 객체를 반환합니다!

4) handleSubmit 기능

handleSubmit: ((데이터: 객체, e?: 이벤트) => 무효, (오류: 객체, e?: 이벤트) => 무효) => 함수

handleSubmit 함수는 양식 유효성 검사가 성공하면 ‘양식 데이터’를 받습니다!

handleSubmit 함수는 확인,사례.default() 방지 등에 대한 책임

handleSubmit은 두 개의 인수를 허용합니다. 데이터가 유효할 때 호출되는 함수두 번째는 데이터가 유효하지 않을 때 호출되는 함수오전.

사용자가 제출하면 handleSubmit은 데이터가 유효한 경우에만 필요한 모든 유효성 검사 및 작업을 수행합니다. onValid 함수전화하세요.

5) 등록 기능 확인 방법

조건부 개체를 등록의 두 번째 인수로 전달하면 HTML에 의존하는 대신 JS에서 양식의 유효성을 검사할 수 있습니다.

값이 유효하지 않은 경우 키보드와 마우스를 유효하지 않은 항목으로 직접 이동하십시오.집중하다“내가 하게 해줘!

또한 조건이 충족되지 않으면 오류가 생성됩니다. 예: “required: true” 대신 “required: “This is required!”” 소식배달할 수 있습니다.

즉, 조건에 값을 넣을 수 있지만 “문자열” 또는 “객체(값/메시지)”를 넣어 “오류 메시지”를 제공할 수 있습니다

6) 옵션 확인

확인하다 옵션은 값이 인수로 수신되고 유효성 검사가 통과되는지 여부에 따라 허위 사실 또는 문자열(오류 메시지)반환합니다!

그건 입력에 여러 검사가 필요할 수 있으므로 단일 함수이거나 여러 함수가 있는 개체일 수 있습니다.

함수에 “비동기”라는 접두어를 붙여 비동기식으로 만들고 서버를 확인하고 응답을 받을 수도 있습니다.

7) 정규식 유효성 검사

또 다른 확인 방법은 정규식있다

‘ 레지스터의 두 번째 인수로무늬‘라는 값을 입력하면 정규식을 사용할 수 있습니다!

정규식도 단순히 표현식이 아닌 “객체(값/메시지)”를 전달하여 오류 메시지를 전달할 수 있습니다

8) setError를 사용한 사용자 지정 유효성 검사(setError를 사용한 자체 유효성 검사)

위에서 논의한 검증 방법 외에도 우리가 만든 규칙에 따라 검증할 수 있습니다!

무작위로 오류를 생성하는 방법은 무엇입니까?

먼저 useForm 후크에서 ‘setError‘를 가져와야 합니다. 이로 인해 특정 오류가 나타납니다. setError는 발생한 문제에 따라 추가 오류를 설정하는 데 도움이 됩니다.

유효한 함수에 조건문을 작성하고 setError 함수를 실행합니다(이 시점에서 값의 이름을 첫 번째 인수로, 메시지를 포함하는 객체를 두 번째 인수로 제공).

또한 setError에 대한 인수로 {shouldFocus:true}를 전달하면 양식에서 선택한 입력 요소에 강제로 초점을 맞출 수 있습니다.

그리고 추가 오류가 필요한 경우 요소의 이름을 변경하여 사용할 수 있습니다.

9) 폼 상태

formState와 함께, formState.errors오류가 있는지, 어떤 오류인지 알 수 있습니다!

즉, 오류가 발생했습니다 값수업 오류 유형, 에러 메시지반환

10) 값 설정

setValue: (이름: 문자열, 값: 알 수 없음, 구성?: 개체) => 무효

필드 값을 업데이트합니다. 이 기능으로 등록된 필드의 값을 동적으로 설정하고 양식 상태를 확인 및 업데이트하는 옵션을 가질 수 있습니다.(동시에 불필요한 재 렌더링을 피하기 위해 사용됩니다.)