리액트 RHF 제출 시 검사하는 방법 질문

Question

안녕하세용.제목처럼 리액트에서 RHF 쓰다가 궁금한게 생겨서 여쭤봅니다.필수 필드인 경우 required 옵션을 사용하고,특수한 조건이 필요한 경우 validate 옵션을 사용하는 거로 알고 있습니다.근데 필드가 아주 많을 경우, 필드 하나하나에 찾아가서 직접 지정하는 게 너무 번거롭게 느겨지더라고요.페이지가 여러개인데, 한 페이지당 최소 30개라서...그래서 RHF를 사용하되, 제출 시 자동 검사 기능은 이용하지 않고,직접 검사하는 함수를 만들어서 사용하는것은 별로인지 여쭤봅니다.방식은 아래 코드와 같습니다.코드가 허접해도 부디 잘 봐주시기 바랍니다.// 값 검사만 RHF를 이용하는 함수 // RHF 제출 시 필수 필드에 적용되는 자동 검사와 다르게 내가 원하는 것만 할 수 있음 import type { UseFormGetValues, FieldValues, Path } from "react-hook-form"; export function checkNullsRHF( names: readonly Path[], // ✅ string 대신 Path, 폼에 실제로 존재하는 값만 받음 getValues: UseFormGetValues ) { for (const name of names) { const value = getValues(name) as unknown; // if (name === "chk21") { // alert(1) // } // 해당 name을 가진 실제 DOM 요소 찾아오기 const element = document.querySelector(`[name="${name}"]`); // 체크박스 배열인 경우 if (Array.isArray(value)) { if (value.length === 0) { alert("모든 항목을 체크해주세요."); console.log(name) document.querySelector(`[name="${name}"]`)?.focus(); return false; } } // 라디오인 경우, 해당 값을 가진 라디오 버튼이 실제로 존재해야 한다. // 화면의 라디오는 value: 1, 2, 3 인거 밖에 없는데, value:0 으로 제출하면 걸린다는 말 else if (element?.type === "radio") { const radios = document.querySelectorAll(`input[type="radio"][name="${name}"]`); const checked = Array.from(radios).some(r => r.checked); if (!checked) { alert("모든 항목을 체크해주세요."); console.log(name) document.querySelector(`[name="${name}"]`)?.focus(); return false; } } // 입력태그 value 값이 문자열인 경우 else if (typeof value === "string") { // text나 textarea면 빈 문자열 허용 if (element?.tagName === "INPUT" && (element as HTMLInputElement).type === "text") { // text input은 빈문자열 허용 → 그냥 넘어감 // console.log(name) } else if (element?.tagName === "TEXTAREA") { // textarea도 빈문자열 허용 → 그냥 넘어감 // console.log(name) } else { // 그 외 (radio, select 등) → 빈값 금지 if (!value.trim()) { alert("모든 항목을 체크해주세요."); element?.focus(); console.log(name) return false; } } } else if (value == null || value === "") { alert("모든 항목을 체크해주세요."); console.log(name) document.querySelector(`[name="${name}"]`)?.focus(); return false; } } return true; } // 실제 호출부 function validateMunjin(): boolean { // RHF 내부에서 현재 등록된 필드들 const registered = Object.keys(Form.control._fields); // 제외할 항목들 // 체크박스는 여기서 안하고 아래에서 직접 할것 const exclude: (keyof FormData)[] = [ "chk3_3_1", "chk3_3_2", "chk3_3_3", "chk3_3_4", "chk3_3_5", "chk4_3_1", "chk4_3_2", "chk4_3_3", "chk4_3_4", "chk4_3_5", "chk5_3_1", "chk5_3_2", "chk5_3_3", "chk5_3_4", "chk5_3_5", "chk6_3_1", "chk6_3_2", "chk6_3_3", "chk6_3_4", "chk6_3_5", "chk7_3_1", "chk7_3_2", "chk7_3_3", "chk7_3_4", "chk7_3_5", ]; // 제외 목록 빼고 검사 대상만 추림 const targetNames = registered.filter( (name) => !exclude.includes(name as keyof FormData) ) as (keyof FormData)[]; // 검사 함수에 넘기기 if (!checkNullsRHF(targetNames, Form.getValues)) { return false; } // 특수한 케이스들 직접 명시 if (values.chk1 === "1" && !values.txt1) { alert("상세 명칭을 입력해주세요."); document.getElementById("chk1")?.focus(); return false; } }

파아란_푸딩 · Answer

Zod 한 번 사용해보세요.[React] Zod를 이용하여 React Hook Form 사용하기프롬프트: 아래 코드를 zod를 사용해서 간소화하시오.

리액트 RHF 제출 시 검사하는 방법 질문

1개의 답변

Q&A 목록