FRONT/React

[REACT] react-hook-form 사용하기 - 구현(2)

2022.06.28

1편(개념편)에서 이어지는 내용입니다.😎 위 사진처럼 회원가입, 로그인 등 폼을 활용해 사용자에게 입력 필드를 제공할 때 입력과 동시에 유효성 검사를 진행하면 사용자 친화적으로 접근할 수 있어 많은 사이트들이 해당 유효성 검사 방식을 사용합니다. react-hook-form을 사용해 입력과 동시에 유효성 검증을 구현해보겠습니다. 1. react-hook-form의 기본 설정값 1편에서 설명했듯이 react-hook-form은 submit 함수가 호출 될 때, 즉 사용자가 어떤 행위를 해야 유효성 검증을 진행합니다. 이 부분을 해결하기 위해 입력 필드에 validate 옵션을 통해 함수로 유효성 검사하는 부분을 분리하겠습니다. 2. 구현 [a.기능 설명] 일단 입력 필드의 상태를 세 가지의 타입으로 나눴습..

FRONT/React

[REACT] react-hook-form 사용하기 - 개념(1)

2022.06.21

1. React Hook Form 소개 공식문서 링크 : https://react-hook-form.com/ React Hook Form은 React 내에서 From을 쉽게 제어하고 손쉽게 유효성 검사를 처리하도록 도와주는 라이브러리입니다.다른 종속성이 없는 최소한의 라이브러리로 구성되어 있어 성능이 뛰어나고 사용이 간편합니다. [React 기본 입력 필드 처리] import React, { useState } from "react"; export default function App() { const [state, setState] = useState({ email: "", password: "" }); const handleInputChange = (event) => { setState((prevPr..

[REACT] react-hook-form 사용하기 - 구현(2)

[REACT] react-hook-form 사용하기 - 개념(1)

티스토리툴바