[React 24] - useApolloClient,React-Hook-Form, Yup, Common-Component

👾 오늘의 목표

1. useApolloClient
2. React-Hook-Form
3. 검증 라이브러리 Yup
4. 재사용 위한 공통컴포넌트 Common-Component

---

1. useApolloClient

ApolloClient를 사용할 때 여러가지 쿼리 방식이 있다.

• useQuery - 화면이 그려질 때 자동으로 요청, 자동으로 실행.
• useLazyQuery - 함수를 실행할 때 수동으로 데이터 요청, 자동으로 실행.
• useApolloClient - useQuery를 axios처럼 사용하는 방법. 수동으로 데이터 요청, 수동으로 실행.

2. React-Hook-Form

작성 형식을 뜻하는 form 태그 안에서

• form 태그에 onSubmit을 사용하면 버튼을 눌렀을 때 작성된 내용을 백엔드로 보낼 수 있다.
• 버튼의 타입을 reset으로 주면 폼안의 input들이 모두 초기화 시킬 수 있다.
• 나만의 버튼을 만든다면 type="button"을 꼭 적어줘야 한다. 그렇지 않으면 form의 default 값인 type="submit"이 적용돼서 버튼이 무조건 실행되게 된다.

form의 이러한 특징을 자동화해주는 라이브러리가 있는데 대표적으로 formik, react-hook-form, react-form, redux-form 등이 있다.
이 중에서 react-hook-form을 사용해볼건데 이것은 class형에서는 사용이 어렵고 함수형에서 사용가능하다.

React-Hook-Form의 장점 및 특징

react-hook-form을 사용하면 기존에 setState를 이용해서 input 값을 받아올 때 매번 비효율적으로 리랜더가 일어났던 문제점을 해결할 수 있다. (상단의 렌더 카운트를 보면 알 수 있다.)
이는 비제어 컴포넌트의 특징을 이용했기 때문에 가능하다.
비제어 컴포넌트는 input에 작성했다고 하더라도 state에 따로 보관하지 않고 나중에 input값을 따로 가져오는 컴포넌트를 말한다.
반면에 제어 컴포넌트는 작성하는 것마다 state에 저장해서 state와 input값이 100% 일치하는 컴포넌트이다.

일반적인 다른 폼 라이브러리들은 제어 컴포넌트의 형식을 띄고 있어서 속도가 느리지만 react-hook-form은 비제어 컴포넌트의 형식이어서 리렌더가 일어나지 않아서 속도가 빠르다는 장점도 있다.
(하지만 정말 중요한 데이터들에 있어서는 제어 컴포넌트를 사용하는 것이 좋다.)

React-Hook-Form 사용하기

• register : onChange 같은 속성들이 들어가 있음
• handleSubmit : 입력한 state들의 내용들을 함수 안으로 넣어준다.

3. 검증 라이브러리 Yup

React-hook-form 과 Yup 같이 사용하기 위한 Docs

이렇게 만든 yup의 schema를 resolver를 통해서 react-hook-form과 연결해주었다.

에러가 있을 때 에러 메세지르 보여주는 부분은 formState의 errors를 이용하면 된다.

에러가 없고 모두 다 잘 입력이 되었다면 formState의 isValid가 true로 들어오게 된다.

로그인 버튼을 안 눌러도 바로 한번 실행 되게끔 하고 싶다면 모드(mode)를 onChange로 해주면 된다.

Yup docs를 보면 yup에 기본 validation 조건 말고 다른 조건을 주는 방법도 있다.

4. 재사용 위한 공통컴포넌트 Common-Component

import 하는 부분

공통 컴포넌트