5주차 목요일 수업내용

중고마켓관련내용~

onChangeWriter 하던것
라이브러리 사용해서 하는것

useQuery axios 처럼 사용 ==> useApolloClient
폼 자동으로 만들기 ==> React-Hook-Form
Validation 라이브러리 ==> Yup
재사용위한 공통 컴포넌트! ==> Common-Component 버튼하나 인풋하나까지도 다 공통컴포넌트 만듬 ㅎ

오늘 하는 내용이 가장 실무에 가깝다!!!!! 꺄아아앙

useQuery /useLazyQuery /useAplolloClient

useQuery
==> 해당컴포넌트가 그려질때 자동으로 쿼리날라가서 데이터받아옴 그러고 그려줌
==>나는 내가 원할때 쿼리가 날아갔으면 좋겠는데 그건안되나???
요청 : 자동/ 리랜더 : 자동

useLazyQuery
==> 함수를 실행할때! 쿼리가 날라가고 데이터가 받아지면 그려짐
-- 데이터가 받아와지면 화면이 자동으로 그려짐
요청 : 수동/ 리랜더 : 자동

useAplolloClient
==> 엑시오스랑 비슷함, 원할때 요청
자동으로 그림까지 그려주진않고, 리절트에 담아서 State 이용해가꾸 리랜더까지해야 그려짐!
요청 : 수동/ 리랜더 : 수동

useAplolloClient

오늘은 그중 useAplolloClient 를 배워보게따 유즈아폴로클라이언트~~
아폴로클라이언트를 이용해서 로그인할때부터 패치 유저해서 정보들을 처음부터 담음!!!

인풋 폼 자동으로 만들기 React-Hook-Form

예전 방식
폼안에있는 버튼에도 타입이 있음. (초기화, 서브밋, 등..)

<button type="button">

초기화로 해놓은 버튼을 누르면 폼안의 값들이 다 빈값으로 바뀌는기능을 구현할수 있음
서브밋 버튼을 누르면 폼안의 내용(온서브밋 안의 내용)을 백엔드에 날릴수있움
버튼타입 을 버튼으로 하면 내가 원하는 함수를 연결할 수 있는 (온클릭) ~

버튼에 타입을 안정해놓고 온클릭함수를 연결하면 서브밋과 함께 함수가 실행된다.
왜냐하면 버튼기능의 디폴트값이 서브밋이기 때문!!
만약 그냥 함수만 실행하고싶다면 꼭~ 버튼타입 버튼을 해놓아야한다!

자유게시판만들때 가장 복잡하고 코드가 많았던게 폼이었다!!
그걸 그나마 리팩토링 해보겠다고 inputs로 묶어서 했었움

리덕스폼
리액트폼
리액트훅 폼
포믹 과 같은 라이브러리들이 엄청나게 많다!!
가장유명했던것은 포믹!(강의가 따로 나와있을정도) 이였는데
리액트 훅폼이 대세로 자리잡았다!!!(사용방법이 훨씬 간단함! 독스 몇장만 보면 바로 해결할 수있움)단. 클래스 컨포넌트에서는 포믹을 쓸수밖에 없돠.

훅폼!

기존에는 setState를 사용해서 타자를 칠때마다 리랜더링이되어서 굉장히 비효율적이었다.
어떻게 그럴 수 있디??
컴포넌트에는 제어 컴포넌트/ 비제어컴포넌트 가 있다.
제어 컴포넌트는 작성하는것마다 스테이트와 인풋과의 연결이 되어 데이터가 100% 일치한다.
비제어 컴포넌트는 작성했다 하더라도 작성이 완료되었을때 인풋안의 내용을 스테이트에 넘김

대부분의 사이트들은 제어 컴토넌트다.
하지만 훅폼은 비제어 컴포넌트라 스테이트가 여러번 설정되지않아 효율적이다.
(무조건 좋은건아니다. 중요한 내용일경우엔 매번저장되지않아서 불안정 하기떄문)

리액트 훅폼 독스의 어드벤스드 부분을 우리가 많이 보게될 화면!!

짠!!! 스테이트를 따로 지정할 필요가 없어서 굉장히 간단하게 끝나버렸다!!
handleSubmit(온클릭함수)
하면 온클릭함수안에 핸들서브밋의 데이터가 들어감!!!(클로저? 인것같우!)

객체는 쩜을 사용하면 되지여어~

Yup

에러도 더 쉽게 할 수있는 라이브러리가 있돱~ 우어어
에러스테이트!

엄청 간단하구나!!! ㅠㅠ
이 간단해 보이는걸 또 쪼개서 공통 컴포넌트로 빼놓으면 !!
여기저기서 임폴트해서 사용!
엄청나게 쌓이게될테니!! 스토리북 을 활용하게 된다!!
https://brunch.co.kr/@kmongdev/17