SERIES

폼 데이터 관리를 위한 React Hook Form

4 Posts·Last updated on May 18, 2023

React Hook Form

May 18, 2023

react-hook-form 은 에서의 폼 데이터 관리를 쉽게 도와주는 라이브러리이다. 에서 폼 데이터를 상태에 저장하고, 잘못된 형식이 들어오지 않도록 유효성을 검사하고, 유효성 검사 결과에 따른 적절한 오류 메시지를 보여주도록 관리하는데에는 많은 코드 작성이 들어가고, 요소의 값의 변화를 가 제어하는 제어 컴포넌트의 형태로 작성하면 이벤트가…


유효성 검사

May 18, 2023

유효성 검사 작성 방법 과 같은 폼 요소에 대해서 데이터의 유효성을 검사하는 방법은 메소드의 두 번째 매개변수인 에 검사 조건을 입력해주는 것이다. , , 등 기본적으로 존재하는 옵션을 사용할 수도 있고, 자신이 직접 새로운 조건을 입력해야 하는 경우에는 옵션을 사용할 수 있다. 1. 기본 옵션 기본적으로 존재하는 옵션에 대해서는 위와 같은 형…


React Hook Form Devtools

May 18, 2023

은 폼 데이터를 한 눈에 조회하고 변화하는 과정을 쉽게 추적할 수 있도록 개발 도구를 지원한다. 이를 사용하기 위한 과정은 다음과 같다: 1. 설치 2. DevTool 가져오기 3. 추적하려는 form 객체의 control 전달 예시 코드


Yup 라이브러리 연동

May 18, 2023

에 내장되어 있는 유효성 검사 옵션들을 이용할 수도 있지만, 과 같이 유효성 검사를 위해 다양한 기능을 제공하는 라이브러리를 사용할 수도 있다. 을 사용했을 때의 장점은 만의 다양한 기능을 이용할 수 있다는 점도 있지만, 유효성 검사 부분을 따로 하나의 로 뺄 수 있으므로 코드 부분이 간결해 진다는 점이다. 연동 방법 1. 패키지 설치 라이…