[TIL] 4. 쿼리방식들 / 폼 라이브러리 / 검증 라이브러리 / 공통컴포넌트

 

 

Today Goals

1. useQuery를 axios처럼 사용할 수 있대 - useApolloCient
2. 헉! 폼을 자동으로 만들어준다고?! - React-Hook-Form
3. Validation 라이브러리도 있대! - Yup 엽?
4. 재사용 위한 공통컴포넌트 만들자! - Common-Component

 

---

 

여러가지 쿼리방식

useLazyQuery

useLazyQuery = useQuery + 원하는 시점에 실행

useLazyQuery는 useQuery 와 같되 원하는 시점에서 실행을 해줄 수 있습니다.

(따라서 {data} 를 받아와서 리렌더링이 일어난다.)

(useQuery는 페이지가 시작될 때. 컴포넌트가 열리면 자동으로 실행된다.)

 

useApolloClient

useApolloClient는 axios처럼 원하는 위치에서 query불러오기가 가능하고

결과 값을 원하는 상자에 담아줄 수 있습니다.

(apolloclient에서 import 받으면 됩니다.)

 

const client = useApolloClient() ← 이걸 Axios라고 보면 된다
const result = await client.query({ query:FETCH_USER_LOGGED_IN,
   context:{
      headers:{
         authorization:Bearer ${result.data?.loginUser.accessToken}
      }
   }
})
.
.
.
setUserInfo(result.data.fetchUserLoggedIn) ←글로벌 스테이트에 담기

원하는 시점에 query요청을 보낼 수 있는 useApolloClient의 특징을 활용하여

fetchUserLoggedIn 결과값(UserInfo)을 GlobalState에 담아줄 수 있습니다.

 

이를 위해 onClickLogin 안에서 client.query({})로 요청을 보내는데 이 때,

중요한 포인트가 있습니다.

어느 정보를 불러올지 인증 정보를 함께 보내야 한다는 것입니다.

따라서 client.query의 context의 headers

내부에 Authorization 정보를 함께 첨부해 보내주고

그 결과값을 GlobalContext 안 setUserInfo에 담아줍니다.

폼 라이브러리(react-hook-form)

우리가 여태까지 힘들게 만들었던 폼, 사실은 폼을 대신 만들어주는 도구가 있습니다.

react-form, redux-form, react-hook-form, formik 등 그 종류도 굉장히 다양합니다.

함수형 컴포넌트와 hook을 사용하는 경우, 가장 사용하기 쉽고 성능적으로 좋은 폼은 react-hook-form 입니다.

[<https://react-hook-form.com/>](<https://react-hook-form.com/>)

폼 라이브러리를 사용하면 하나하나 직접 만들지 않고, 밸리데이션 체크 및 폼 관리 등을 좀 더 깔끔하게 할 수 있습니다.

검증 라이브러리(yup)

검증 라이브러리로 대표적인 것이 yup 입니다.

검증 라이브러리가 왜 필요하냐구요?

여태까지 우리는 해당 입력창이 비어있는지만 검증했습니다.

하지만, 검증은 더욱 복잡합니다.

숫자인지 문자인지, 최소 4자리를 만족하는지, 특수문자가 들어가있는지 등등...

이런 것들이 이미 다 만들어져 있어서 명령어 입력으로 해결된다면 얼마나 쉽고 간편할까요?

yup을 사용하여 이런 문제들을 해결할 수 있습니다.

// 사용 예시
import * as yup from "yup"

const schema = yup.object().shape({
	firstName: yup.string().required(),
	age: yup.number().positive().integer().required()
})

yup은 react-hook-form에서만 사용할 수 있는 것이 아니며, 다른 폼 라이브러리들과도 함께 사용 가능합니다.

 

 

---

 

 

버전이 계속 바뀌는 듯 합니다.

2022년 2월 16일 기준 '@hookform/resolvers/yup' 에서 

import 받아야 yupResolver 가 받아와 집니다.

 

 

---

 

오늘의 정리

 

여러가지 쿼리방식

 

1. 여러 쿼리 방식 중 컴포넌트가 열리면 실행되는 useQuery와 달리 원하는 시점에 실행 해줄 수 있는 useLazyQuery와 axios처럼 원하는 위치에서 받을 수 있게 도와주고 결과 값을 내가 원하는 상자에 담아줄 수 있는 useApolloClient를 알아봤죠! 위 특징으로 본다면 useLazyQuery는 useQuery와, useApolloClient는 axios와 닮았습니다.
2. 원하는 시점에 query요청을 보낼 수 있는 useApolloClient의 특징을 활용하여 fetchUserLoggedIn 결과값(UserInfo)을 GlobalState에 담아주는 실습을 했습니다. 이를 위해서 우리는 onClickLogin 안에서 client.query({})로 요청을 보냈습니다! 여기서 중요한 포인트가 있었죠! 어느 정보를 불러올지 인증 정보를 함께 보내야 한다는 것! 따라서 client.query의 context의 headers 내부에 Authorization 정보를 함께 첨부해 보내주었고, 그 결과값을 GlobalContext 안 setUserInfo에 담아 주었습니다!
3. refreshToken을 배울때까지의 임시방편이지만 담아준 userInfo를 localStorage에 담아주었습니다. JSON.stringfy를 활용해 setItem해주었습니다.

 

폼 라이브러리는 여러 종류가 있습니다.

1. react-form, redux-form, formik, react-hook-form 등... 폼 라이브러리란 그동안 우리가 스프레드 연산자를 쓰고, onChangeInput, state 등을 만들어서 직접 관리했던 폼들을 미리 만들어 놓고, 라이브러리 형태로 제공해 주는 것이 폼 라이브러리였습니다.
2. 그 중, 최근에 함수형 컴포넌트에서 가장 많이 사용되는 폼 라이브러리가 바로 react-hook-form 입니다!

제어 컴포넌트

 

 

비제어 컴포넌트

 

 

1. react-hook-form과 함께 제어(controlled)/비제어(uncontrolled) 컴포넌트도 알아봤습니다! 제어 컴포넌트는 state 등 입력값에 대한 변경 사항에 대한 정확도가 높다는 장점이 있었습니다! 따라서 중요도가 높은 내용 입력에 적합했죠! 다만 변경 시 마다 다시 렌더링 되기 때문에 느리다는 단점이 있었습니다! 지금까지 우리가 사용한 방식은 제어 컴포넌트였죠!
2. 하지만 react-hook-form은 비제어 컴포넌트 방식이기 때문에 변경 사항에 대해 100% 정확도는 보장할 수 없었습니다! 그렇지만 입력 시 마다 다시 렌더링 하는 과정이 없기 때문에 빠른 장점이 있었습니다! React-hook-form을 사용한 작성은 지금까지 만들었던 방식과는 조금 달랐습니다! 페이지 전환 없이 데이터만 주고 받는 ajax(비동기 javascript통신)방식이라 했죠!

 

입력값을 받을 Input태그들을 form이라는 태그로 감싸주었습니다

 

1. input에 대한 처리는 useForm()으로 state를 등록하는데 필요한 모든 기능(onChange,onClick, onError 등)이 담겨있는 register를 가져와 input에 스프레드 시켜주었습니다. 그냥 스프레드만 시켜주는 것이 아니였죠! register(“”)안에 input의 이름(구분)도 넣어주었습니다. 이렇게 담긴 값들 혹은 Error등 은 formState에 담겼습니다!
2. form태그에는 onSubmit()이라는 함수를 연결 시켜주었고, 이렇게 감싸준 form 태그 내부에 button을 넣어주었습니다! 이 버튼은 기본값이 submit이기 때문에 버튼을 누르면 이 버튼을 누르게 되면 form에 연결된 onSubmit에 담은 함수가 실행이 되었죠!(버튼의 default type은 submit이기 때문에 다른 기능이 들어간 버튼을 만들어 추가적으로 넣어줄 때는 type을 button으로 주어 사용해야 했습니다) 하지만 그냥 함수만 담아 실행할 수 없었습니다! 우리가 등록한 데이터들을 함께 담아서 실행해야 하기 때문에 함수를 handleSubmit으로 감싸주었습니다. useForm({})안에 들어가는 mode: “onChange” 는 변동을 확인하는 역할인데 컴포넌트 분리로 인한 register 연결유지를 위해 사용합니다!

 

검증라이브러리 yup

 

1. yup을 사용하여, 기존의 정규표현식 또는 length를 기준으로 한 최소/최대글자수, 등의 조건을 아주 쉽게 추가할 수 있었습니다. 검증 라이브러리와 폼 라이브러리는 서로간에 독립적으로 사용될 수 있으므로, 반드시 react-hook-form과 yup을 같이 사용해야만 하는 것은 아니었어요! (yup은 formik 등 다른 라이브러리에서도 함께 사용 가능합니다) react-hook-form 과 함께 사용하기 위해 yarn add @hookform/resolvers yup 를 사용해 추가해줬죠! 사용하기 위해 @hookform/resolvers/yup/ 내부의 yupResolver를 Import 시켜줬습니다!
2. 여기서 yupResolver()를 useForm({}) 내부 resolver에 넣어주었고 규칙 설정을 위해 schema를 만들어 yup.object().shape({}) 설정을 해주었습니다. 이 안에는 우리의 입력값의 규칙을 정해 줄 수 있었습니다! 이렇게 만든 schema를 yupResolver()안에 넣어주어 React-hook-form과 연결시켜줍니다. 끝으로 formState안에는 isValid라는 값이 있다고 했습니다! 이 값을 활용하면 값이 모두 올바르게 들어갔는지 검증할 수 있습니다. 

 

Common Component

 

1. 인풋박스와 버튼 등은 각각의 페이지에서 직접 작성하지 않고, 따로 만들어 놓고 import하여 사용합니다. 이러한 컴포넌트를 공통컴포넌트(Common components)라고 합니다.(ex.크몽 스토리북)
2. 이렇게 함으로써 얻게 되는 장점은 특별한 날, 또는 다른 이유로 인해서 전체적인 화면 분위기를 변경해야 할 때, common 컴포넌트를 변경함으로써 모든 버튼에 전체 적용이 가능하도록 만듭니다. 만약, 페이지별로 각각 만들었다면 변경하기도 힘들고, 다시 되돌아오기도 굉장히 힘들어 집니다. 어떠한 회사에 가시더라도 공통 컴포넌트는 사용하게 될 겁니다.