220610 프론트엔드 부트캠프 31일차 : HOF, react-hook-form, yup
- useQuery를 axios처럼 사용할 수 있대! → useApolloClient
- 폼을 자동으로 만들어준다? → React-Hook-Form
- Validation 라이브러리도 있어! → Yup ~ 정규 표현식
- 재사용 위한 공통 컴포넌트를 만들자 → Common-Component
HOF
id는 고유값이기 때문에, 데이터가 많아질 수록 중복의 위험이 있다. HOF가 권장된다.
react-hook-form
google 에 react hook form 검색
react-form, redux-for, formik(어려움)
-> 함수형으로 바뀌고 나서 react-hook-form 나옴
yarn add react-hook-form
🌼 제어 컴포넌트
기존 폼 라이브러리는 제어 컴포넌트 방식
input창에 value={writer} 입력하면 내가 입력한 값과 스테이트에 들어간 값이 완전 일치한다고 볼 수 있다.
제어 컴포넌트는 입력할 때마다 state가 바뀐다(리렌더링)
입력할 때마다 리렌더 되기 때문에 속도가 느리다.
🌼 비제어 컴포넌트
리액트 훅 폼은 비제어 방식
state랑 상관없이 입력하면 리렌더가 일어나지 않는다.
document.getElementbyId, useRef로 가져온다.
성능이 더 빨라지지만 입력한 값과 스테이트의 값이 완벽히 같다고 확신할 수 없다.
대부분 비제어로 하지만 하나라도 틀리면 안되는 비밀번호 같은 건 제어 컴포넌트를 이용한다.
type = "reset" - form 안의 입력한 값이 초기화 된다.
type = "submit" - onSubmit에 바인딩된 함수가 실행된다.
type = "button" - onSubmit이랑 상관없고 onClick해서 다른 함수를 바인딩 해줘야 한다.
❗️form 안에서의 button은 기본값이 submit이다!
onClick 바인딩 해놨다면, onSubmit의 함수와 onClick의 함수 둘 다 실행된다.
등록하기 button을 누르면 handleSubmit이 먼저 실행돼서 자기가 갖고 있던 writer, title, contents 데이터들을
{...register}에 넣어준다.
yup - validation 편하게 하기 🤜
우리는 에러메세지를 내보내기 위해 별짓을 다했었죠..^^
이젠 엽이라는 라이브러리를 쓸 것임.
리액트 훅 폼이랑만 사용되는 게 아니라 포믹이랑도 사용되고 다른 라이브러리랑도 같이 많이 사용된다.
yarn add yup
yarn add @hookform/resolvers
에러 있으면 formState에 들어옴. isValid도 내장되어 있음
formState.errors.password?.message
formState.isValid
정규표현식 regex - regular expression
/\d{3}-\d{3,4}-\d{4}/.test(”010-123-5678”) // true
디짓 “d”에서 탈출해줘, \
\d → 디짓(숫자)
?하면 한 개 혹은 0개, + 하면 한 개 이상,
정규표현식 - 이 조건에 맞는 내용이 있으면 true!
꼭 맞게끔 하고 싶다면, 시작점과 끝 점을 명시해야 한다. (^,$)
/^\d{3}-\d{3,4}-\d{4}$/
이메일
문자 혹은 숫자 \w
/^\w+@\w+\.\w+$/
정규표현식에서 .은 문자 . 을 의미하는 게 아님, 모든 문자열을 의미함
띄어쓰기 \s
문자만은 없음. [a-z]이렇게 쓸 수 있다.
ㅁ ㅁ ㅁ 진진자라 진진 자라 자라자라 자라자라 자라자라
Input01 컴포넌트를 불러올 때 register={register("writer")}를 props로 전달한다.
Input01 이라는 컴포넌트에 {...regsiter("writer")}하는 것은 아무런 의미가 없다.
<Input01
defaultValue={props.boardData?.fetchBoard.writer}
placeholder="이름을 입력해주세요."
isEdit={props.isEdit}
register={register("writer")}
/>placeholder는 적용이 되네...?
type과 placeholder는 ... 바로 적용이 되는건가? 아니네 이것도 다 전달해줘서 가능한 것이었음... ~
props로 전달해서 그 안에 input태그 안에 다시 type을 적어줘야한다.
// BoardWrite.presenter
<Input01
defaultValue={props.boardData?.fetchBoard.writer}
placeholder="비밀번호를 입력해주세요."
isEdit={props.isEdit}
register={register("password")}
type="password"
/>
// common -> inputs
<input
placeholder={props.placeholder}
defaultValue={props.defaultValue}
disabled={!!props.isEdit}
type={props.type}
{...props.register}
/>
페이지네이션 페이지가 1~9까지만 나오던 문제 -> 저 하트, aaa가 총 9개였음(뿌리는 게 애초에 9개여서 9개만 나오던 것)
벌써 금요일이라닛..ㅎ(을 월요일에 쓰고 있지만)
PF분들께 카드 드리고, 기여운 강아쥐 그림도 드림~~~ PF가 두 분이니까 카드를 두 개 쓸 수 있어서 좋은 것 같다.
점심은 낭만 부대찌개..^^ 일주일에 한 번은 먹어줘야하는...! 셋이 먹을 때는 셋이 먹어서 좋고 둘이 먹을 땐 둘이 먹어서 좋았다.
편의점 갔더니 예거 맥주 청포도맛이 있어서 4캔 11000원 하는 걸 구입했다. 하.. 언제 천원 오른거야 진짜~ 그리고 밖에서 소금빵이랑 트윅스 먹고... 이 주는 밖에 나가서 바람쐰 날이 유독 많은 것 같다.
이날은...나의 허브가 사망한 날... 허브 꽂고 집이랑 학원이랑 왔다갔다 거렸더니 안에서 휘어버린..듯? 다신 안그러겠습니다. 조그만 13인치 화면으로 수업듣고, 코드보고, 코드 쓰려니까 너무 불편했다ㅠㅠ이날은 학원에 더 있을래야 있을 수가 없었다. 그리고 ㅈㅇ이 프캠 마지막날이라서 근처 카페가서 얘기했당...히히 ㅈㅇ이가 사줬다... 넘멋져 담에 내가 사게해서 데이트 또 잡으려는거지?^^
집 가서 강정시켜서 맥주랑 먹는데 css 유튜브를 먹으면서 보는 나 제법 웃겨요... 정말로 수험생활 같이 돼버렸다😇근데 좋아.
순하리 진?이었는데 7.x도라 그런가 맛이 없었다..ㅠ흑흑흑 거의 남겼어. 주말에 약속이 없어서 마음이 좀 여유로웠다 😗