오늘의 목표
1. useApolloClient useQuery를 axios처럼
2. Reack-Hook-Form
3. Validation 라이브러리 Yup
4. 재사용위한 공통컴포넌트
1. 여러가지 쿼리 방식
useQuery/ useLazyQuery/ useApolloClient
useQuery 컴포넌트가 렌더링 될때 자동으로 data라는 이름으로 데이터가 들어와서 자동으로 그려짐
요청, 렌더링이 자동
useLazyQuery 함수를 만들어서 내가 원할때 실행시킬 수 있음 useQuery와 동일하지만 내가 원하는 곳에서 실행 할 수 있음
요청은 수동 렌더링은 자동
useApolloClient
요청 수동 렌더링도 수동
2. Form
<Form>
~~~~
</Form>
<Form>으로 감싼 태그 안에서
<Button type="reset">을 하면 Form안에 데이터들이 전부 초기화가 된다
<Button type="submit">을 하면 <Form onSubmit={}>을 실행하게 됨
커스텀 버튼을 만드려면
<Button type="button" onClick={}>을 하게되면 form안에 있어도 다른게 실행되지 않고 onclick이 실행이 됨
타입을 지정하지 않으면 type의 default는 submit이다 타입지정안하고 onclick을 지정하면 submit과 onclick이 둘다 실행됨
이따구로하면 복잡하기 때문에 라이브러리가 있음
react-form redux-form react-hook-form!!! 트렌드 formik 등
제어컴포넌트
: 작성하는 것마다 state를 작성해줘야됨
비제어컴포넌트
: 작성하더라도 state에 저장안해둠
중요한데이터에는 안씀
3. 에러스테이트 만들기
Yup
독립적으로 쓸 수 있음
yup리졸버를 설치해서 쓸 수 있다.
에러는 formstate에 담김
에러가 없으면 formstate에 isValid에 true가 들어옴
4. 공통컴포넌트
버튼 같은거 전부 공통 컴포넌트에 넣어서 필요한 부분 임포트 해오기
