비회원 장바구니
id={JSON.stringify(el.id)} 도 가능하지만 추천하지 않는 방법이다.
React-Hook-Form
input폼을 자동으로 만들어 주는 라이브러리이다.
React-form -> Redux-form -> Formik (클래스형) -> React-hook-form (함수형)
React-hook-form은 간단하고, 비제어 컴포넌트를 사용해서 성능이 빠르다.
제어 컴포넌트 / 비제어 컴포넌트
-
제어 컴포넌트
input창에 입력하면 setState가 발생, 컴포넌트가 리렌더링 된다. (성능이 느리다.)
input태그에서 신용카드 번호 -> value로 부분을 마스킹해서 보여주는 경우 -
비제어 컴포넌트
state가 있으나, 리렌더링이 발생되지 않는다. (성능이 빠르다.)
doucument.getElementById() 대신 useRef로 생성 가능하다.
React-Hook-Form 설치
yarn add react-hook-form
form 태그는 input태그를 그룹핑하는 태그이다.
form 태그 안에 있는 button태그에는 type 속성이 생긴다.
submit: form 태그에서 onSubmit={} 으로 submit 기능이 가능하다.
이때, form태그 안에 있는 button의type 기본값은 submit이므로 유의한다!- reset : input창 내용 모두 지우기
- button : 버튼
Yup
Yup 라이브러리에는 로그인이나 회원가입 시 input창의 에러를 쉽고 간편하게 검증할 수 있는 기능이 존재한다.
Yup 설치
yarn add yup
yarn add @hookform/resolvers
schema라는 변수를 만들고, yup.object로 검증하고 싶은 변수들을 검증해 준다.
yup.string()은 문자열이고, required에는 검증 실패시 뜨는 메시지를 적어준다.
-
email : 이메일의 경우 .email()을 사용하면 이메일 형식에 맞게 알아서 검증해준다.
-
min, max : 최소글자, 최대글자를 정할 수 있다.
-
matches : 정규표현식을 이용해서 휴대폰, 비밀번호 등 형식에 맞게 검증할 수 있다.
-
useForm을 사용하면 register, handleSubmit, formState를 받아올 수 있다. -
resolver에 yupResolver()를 사용해주고, 위에서 작성한 schema를 넣어준다.
-
mode: "onChange" 는 onChage 함수에 useState를 사용했던 경우 처럼 리렌더링이 된다.
기본값은 onClick이므로, mode를 작성하지 않으면 클릭시에만 리렌더 된다.
-
formState.errors : 위에서 작성한 schema를 통해 검증하여 input값이 검증에 통과하지 못하면 에러 메세지를 보여준다.
-
formState.isValid : 모두 검증이 통과되는지 유무를 알 수 있다.
가능한 BoardWrite와 같은 컴포넌트 별로 validation 파일을 따로 만들어주고,
schema를 export해서 사용해주도록 한다.
커스텀 훅
useForm은 커스텀 훅이다.
커스텀 훅을 사용하면 컨테이너 / 프리젠터 부분을 나누어 줄 필요가 없이 간단하게 사용할 수 있다.
input, button 등을 컴포넌트 별로 만들어 놓고 import해서 재사용 가능하도록 커스텀 훅으로 만들어 준다.
components > commons 폴더에 buttons / inputs 폴더를 만들어 01 / 02 이런식으로 분리해준다.
button 태그를 만들고, props로 버튼 안의 내용을 받아온다.
input 태그를 만들고, type이나 내용은 props로 받아온다.
register의 타입은 UseFormRegisterReturn으로 UseForm에서 제공해준다.
import해서 type이나 내용을 props로 넘겨준다.
