코드캠프 FE 24일차 - TIL(useApolloClient,React-Hook-Form,Yup,Common-Component)

학습목표

1. UseQuery를 axios처럼 사용할 수 있대 >> useApolloClient
2. 폼을 자동으로 >> React-Hook-Form
3. Validation 라이브러리 >> Yup
4. 재사용을 위한 공통컴포넌트 >> Common-Component

jsx가 있으면 하이오더 컴포넌트
없으면 하이오더 펑션

key={el.id} 삭제하고도 실행이 되야 함.

useQuery를 axios처럼 사용하는 법

언제 사용하는가?

---

강제로 넣어주기

데이터는 렌더링 목적
유즈레이지 쿼리 두개를 합친거

• 내가 원하는 시점에 요청할수있되 내가 원하는 변수에 담아쓸 수는 없음(렌더링 목적임)

---

React-Hook-Form

react-form
redux-form
formik
react-hook-form

우리가 일반적으로 폼을 만들때

제어 컴포넌트랑
비제어 컴포넌트로 나눌수 있음

제어 컴포넌트는 통제~ controlled component
비제어 컴포넌트 uncontrolled component

• 제어컴포넌트의 예시
  인풋 밸류값에 유즈스테이트의 값을 넣어주면
  값을 100퍼센트 확신할 수 있다

스테이트가 변경되면 다시 리렌더 됌!
성능 떨어짐

대부분 비제어로 한다 (성능이 좋음)
비밀번호 입력이라던지, 중요한 컴포넌트다 하면 제어로

form
: 하나로 다 묶는다, 이런 뜻의 태그
onSubmit = {} - 묶어서 보낼 때

button
type="reset"
안에 있던 것들이 삭제됌

폼 안에서의 버튼은 디폴트가 서브밋이다

핸들서브밋이 데이터를 각각의 인풋에 집어넣어줌

yup

역은 리액트 훅 폼이랑 같이 쓸 수 있다.
독립적으로도 쓰임

yup 설치

yarn add yup

yarn add @hookform/resolvers

![](https://velog.velcdn.com/images/space086/post/04361d3d-f672-43cf-988b-4f308650e4f5/image.png)

  
## 정규표현식


![](https://velog.velcdn.com/images/space086/post/adf51e0f-dc48-4b32-a4ba-2ec66f819aa7/image.png)



+ 한개이상
{3}: 3개 이상
{3\{6}}


![](https://velog.velcdn.com/images/space086/post/f9ae9887-0f5a-473c-9516-12efbb3cf12c/image.png)

조건에 맞는게 있으면 트루임
시작점과 끝점을 정해주면 됌
![](https://velog.velcdn.com/images/space086/post/6fd6629a-9439-4d61-b5e0-26d33c37bd68/image.png)


![](https://velog.velcdn.com/images/space086/post/ad0d23a8-ca97-40c4-a66f-447f8117fa6e/image.png)