폼 라이브러리
- 공통적으로 사용되는 작은 컴포넌트들을 각각 라이브러리 따로 만들어서
필요시에 꺼내 쓰도록 하는 것.
= 컴포넌트의 재사용성 높아짐.
= 매번 코드를 입력하는 것이 아니라 필요시 import 하여 가져오면 되니까 보다 더 짧은 코드로 폼 관리를 더 깔끔하게 할 수 있다.
ex)input,button,search등등
(많은 회사들이 폼 라이브러리를 이용하고 공통 컴포넌트를 관리해주는 라이브러리
(ex) story book)도 사용하는 추세)
-
폼 라이브러리의 종류 : react-form, redux-form, react-hook-form, formix 등 종류 多
-
React-hook-form ← click!
- 함수형 컴포넌트 중 최근 가장 많이 사용되는 폼으로, 함수형 컴포넌트와 hook을 사용하는 경우 가장 사용하기 쉽고 성능이 좋음.
-
사용 방법
1) 설치 :yarn add react-hook-form
2) 불러오기 :import { useForm } from 'react-hook-form';
3) 연결 :
const {register} = useForm
<input type='text' {...register}>
검증 라이브러리 ( yup )
- 해당 라이브러리를 만족하는 값이 숫자인지, 특수문자인지, 몇 자리인지 등등
검증을 위한 라이브러리- 대표적인 검증 라이브러리 : Yup ← click!
- yup 안에서 정규표현식 가능. (= yup으로 명령어 하나로 해결)
- react-hook-form 뿐만 아니라 기존의 formik 등 다른 폼 라이브러리들과 함께 사용 가능.
- 사용 방법
1) 설치 :yarn add yup
2) 불러오기 :import * as yup from 'yup';
3) 연결 :.png)
• 공통 컴포넌트(Common components)를 재사용하여 구성한 presenter 예시
= 실무에서 컴포넌트 재활용 多
폼라이브러리와 검증 라이브러리 사용 실습
Front-end