[React] react-hook-form 사용기

[React] react-hook-form 사용기

SignUp.js

import React, {useState} from 'react' import {useDispatch} from "react-redux" import {useForm} from "react-hook-form" import {signUp} from "../../actions/users" const SignUp = () => { const {register, handleSubmit, errors} = useForm() const handleLogin = async values => { console.log(values) try{ await dispatch(signUp(values)) alert('회원가입이 완료되었습니다..') history.push('/') }catch(err){ alert('서버 오류로 에러가 났습니다.') } } return( {errors.email && errors.email.message && {errors.email.message}} 완료 ) }

가파르게 사용자가 늘고있는 react-hook-form을 한번 사용해보았다.

2020-03-17 기준

생각보다 직관적이며, 처음써보는데 document도 잘써져있어 금방 사용할 수 있었다.

기존의 redux-form 과 비교하자면, redux 에 자동으로 저장해주는 기능을 제외하면,

모든 부분이 react-hook-form 이 코드 길이도 짧고, 직관적이며, 쉬웠다.

심지어 re-render 도 조절되어, 적당한 rendering이 되는 부분도 장점이였다.

또한 validation도 처리가 쉽게되어 앞으로는 react-hook-form을 사용할 것 같다.

from http://kauboy.tistory.com/33 by ccl(A) rewrite - 2020-03-17 22:20:16

댓글

이 블로그의 인기 게시물

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅)

입트영(2020.03.23) - Iced Drinks / 아이스 음료

Redux + React