CodeCamp 24일차

최창서·2022년 4월 14일
0
post-thumbnail

1. useQuery를 axios처럼 => useApolloClient

여러가지 쿼리 방식
useQuery : 요청을해서 data를 받아오면 알아서 자동으로 그려줌
useLazyQuery : 어떠한 함수를 실행할 때 요청 이후 동작은 useQuery와 동일
useApolloClient : 데이터를 가져온 후에 변수에 담거나 알아서 가공해야함(axios처럼 사용가능)

로그인 버튼을 눌렀을때 유저정보를 받아오고 글로벌 스테이트에 유저 정보를 저장하여 여러 페이지에서 글로벌 스테이트 한줄로 accessToken을 이용할 수 있다.
사용하는 방법은 vscode에서 주석을 통해 설명하겠다.

2. 스프레드연산자 간소화 => React-Hook-Form

전체 태그를 form으로 감싸주고 button에 type을 주면 onSubmit={}이 실행된다.
type에 따라 다른 방식으로 onSubmit이 실행된다.
onSubmit을 실행하고싶지 않다면 button type에 "button"을 주면 된다.
onClick의 경우 로그인과 onSubmit 둘다 실행된다.
onSubmit의 기본 default 값은 "submit" 이다.

이러한 form을 간소화하기위해 react-form , redux-form, react-hook-form, formik 등 다양하게 있다. 가장 유명한건 formik이고 최근에는 react-hook-form이 부상하고 있다.

react hook form
제어컴포넌트 : state와 input이 100% 일치하고 input이 하나하나 변경될때마다 state에 저장되는것
비제어컴포넌트 : input에 작성을했다고 하더라도 state에 저장되지 않고 form에서 가져와서 쓴다.
react hook form은 비제어컴포넌트이기 때문에 성능이 빠르다. 하지만 정말 중요한 데이터에 한해서 제어컴포넌트를 사용하는것이 더 좋을 수도 있다.

3. Validation 라이브러리 => Yup

Yup은 react-hook-form 혹은 formik 등 다양한 라이브러리와 같이 사용할 수 있고
react-hook-form docs에도 Yup과 같이 사용할 수 있는 방법이 있다.

  1. 재사용을 위한 공통컴포넌트 => Common-Component
    스토리북 사용하기
profile
프론트엔드 개발자

0개의 댓글