728x90 반응형 React-Hook-Form7 [React] Zod를 이용하여 React Hook Form 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 zod를 이용하여 react-hook-form 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] react-hook-form을 이용하여 validation (유효성) 처리하기 Zod란? 이번 글에서는 react-hook-form에 다루기보다는 react-hook-form과 함께 사용해 볼 수 있는 zod에 대해 다뤄보도록 하겠습니다. react-hook-form에 대해 더 궁금하신 분들은 위의 링크를 참고해주시면 될 것 같습니다. zod는 validation 처리를 위해 사용할 수 있는 라이브러리로 여러 서비스들에서 쉽게 볼 수 있는 입력 값이 올바르게 되어있는지를 확인할 때 활용할 수 있습니다. Zod 공식 문서를 확인해보면 zod.. 2023. 12. 24. [React] react-hook-form에서 Cannot read properties of undefined (reading '_f') 발생되는 경우 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form Cannot read properties of undefined (reading '_f') 에러에 대해 적어보는 시간을 가져보려고 합니다. 발생되는 경우 먼저 다음의 간단한 코드를 봐보도록 하겠습니다. import React, { useEffect } from 'react'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; interface UseForm { firstPhone: string; secondPhone: string; thirdPhone: strin.. 2023. 2. 1. [React] react-hook-form register 등록 방법 커스텀하기 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form register 등록 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다. register를 props로 넘기기 첫 번째 방법은 register를 props로 넘기는 방법입니다. 개발을 하다 보면 디자인을 입히기 위해 input, select 등의 다양한 스타일 컴포넌트를 생성하게 됩니다. 그러다 보면 유효성 검증을 위해 register를 등록할 때 기존에 마크업 요소들에 적용하던 방식인 다음과 같은 방식을 사용할 수 없게 됩니다. const App = () => { return ( ); }; export default App; 이런 경우에 해결할 수 있는 방법 중 하나가 등록할 register값을 props로 넘겨주는 겁니다. .. 2022. 8. 16. [React] 사용해본 yup 조건절 정리 안녕하세요. J4J입니다. 이번 포스팅은 제가 사용해본 yup 조건절들을 정리해보는 시간을 가져보려고 합니다. 들어가기에 앞서 yup과 함께 react-hook-form을 이용하여 코드가 작성되어 있다는 점 참고 부탁드립니다. Base - 1 먼저 가장 기본이 되는 조건절입니다. 간단한 예시로 다음과 같은 코드를 작성할 수 있습니다. import * as React from 'react'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; interface Iform { displayYn: string; displayContent:.. 2022. 8. 11. [React] react-hook-form과 yup으로 동적 배열 유효성 검증하기 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form과 yup을 이용하여 동적 배열 유효성 검증하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 기본적인 방법 긴말 없이 바로 코드부터 보도록 하겠습니다. 동적 배열 유효성 검증 테스트를 위해 다음과 같이 코드를 작성할 수 있었습니다. import * as React from 'react'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; import { useForm } from 'react-hook-form'; // obj interface interface Iobj { name: string; age: number; } // form.. 2022. 8. 9. [React] react-hook-form과 React.forwardRef() 에러 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form과 React.forwardRef() 에러에 대해 적어보는 시간을 가져보려고 합니다. React.forewardRef() 에러 react-hook-form을 이용하여 개발하면서 공통 컴포넌트에 validation을 적용시키려는 분들이 많으실 겁니다. 하지만 register를 이용하여 validation을 적용할 경우 디버깅 단계에서는 문제가 발생되지 않지만 런타임 단계에서 다음과 같은 에러를 확인하며 react-hook-form이 정상 동작되지 않으셨을 겁니다. 해당 에러가 발생되는 이유는 ref를 props로 전달하려고 하기 때문에 발생됩니다. 일반적으로 register를 사용할 경우 다음과 같이 사용을 하실 겁니다. 하지만 공식 문서.. 2022. 5. 7. [React] react-hook-form을 이용하여 validation (유효성) 처리하기 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form을 이용하여 validation 처리하는 방법에 대해 적어보는 시간을 가져보려고 합니다. react-hook-form 이란? react-hook-form은 react를 이용하여 개발할 때 유효성을 체크할 수 있게 도와주는 모듈입니다. react에서는 유효성을 체크해주는 모듈로써 사용되는 게 react-hook-form과 formilk 라는 것이 대표적으로 있는 것으로 보입니다. formilk를 사용해본적이 없기 때문에 차이점에 대해서 언급하기는 힘들지만 공식 문서를 참고했을 때 react-hook-form의 이점들은 다음과 같은 것이 있는 것으로 확인됩니다. 적은 코드로 더 좋은 퍼포먼스를 보여줌 효율적인 re-rendering을 제공 .. 2022. 5. 2. 이전 1 다음 728x90 반응형
