220610 프론트엔드 부트캠프 31일차 : HOF, react-hook-form, yup

 

1. useQuery를 axios처럼 사용할 수 있대! → useApolloClient
2. 폼을 자동으로 만들어준다? → React-Hook-Form
3. Validation 라이브러리도 있어! → Yup ~ 정규 표현식
4. 재사용 위한 공통 컴포넌트를 만들자 → 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로 가져온다.

 성능이 더 빨라지지만 입력한 값과 스테이트의 값이 완벽히 같다고 확신할 수 없다. 

 대부분 비제어로 하지만 하나라도 틀리면 안되는 비밀번호 같은 건 제어 컴포넌트를 이용한다. 

 

form onSubmit={}, button type

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

 

boardAddress 안의 addressDetail을 넣는 방법

 

  정규표현식 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]이렇게 쓸 수 있다.

 

ㅁ ㅁ ㅁ 진진자라 진진 자라 자라자라 자라자라 자라자라

matches는 yup의 속성이 아닌 string의 속성(아마도)

 

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개만 나오던 것)

 

Array(10).fill(1).... 으로 수정

 

 벌써 금요일이라닛..ㅎ(을 월요일에 쓰고 있지만)

PF분들께 카드 드리고, 기여운 강아쥐 그림도 드림~~~ PF가 두 분이니까 카드를 두 개 쓸 수 있어서 좋은 것 같다.

점심은 낭만 부대찌개..^^ 일주일에 한 번은 먹어줘야하는...! 셋이 먹을 때는 셋이 먹어서 좋고 둘이 먹을 땐 둘이 먹어서 좋았다.

편의점 갔더니 예거 맥주 청포도맛이 있어서 4캔 11000원 하는 걸 구입했다. 하.. 언제 천원 오른거야 진짜~ 그리고 밖에서 소금빵이랑 트윅스 먹고... 이 주는 밖에 나가서 바람쐰 날이 유독 많은 것 같다. 

 이날은...나의 허브가 사망한 날... 허브 꽂고 집이랑 학원이랑 왔다갔다 거렸더니 안에서 휘어버린..듯? 다신 안그러겠습니다. 조그만 13인치 화면으로 수업듣고, 코드보고, 코드 쓰려니까 너무 불편했다ㅠㅠ이날은 학원에 더 있을래야 있을 수가 없었다. 그리고 ㅈㅇ이 프캠 마지막날이라서 근처 카페가서 얘기했당...히히 ㅈㅇ이가 사줬다... 넘멋져 담에 내가 사게해서 데이트 또 잡으려는거지?^^

 집 가서 강정시켜서 맥주랑 먹는데 css 유튜브를 먹으면서 보는 나 제법 웃겨요... 정말로 수험생활 같이 돼버렸다😇근데 좋아.

순하리 진?이었는데 7.x도라 그런가 맛이 없었다..ㅠ흑흑흑 거의 남겼어. 주말에 약속이 없어서 마음이 좀 여유로웠다 😗