TIL 24

쿼리의 다양한 방식

useQuery: 컴포넌트가 열리면 바로 실행

useApolloClient: 쿼리문을 원하는 시점에 실행하게끔 하고 받아온 결과를 내가 원하는 곳에 담을 수 있다. (axios와 비슷) 즉 다른 스테이트에 불러온 결과값을 담아서 사용할 수 있다.

useLazyQuery: 쿼리문을 원하는 시점에 실행하게, 다만 useQuery를 원하는 시점에 실행하는 것으로 시점은 선택할 수 있지만 결과물은 useQuery와 같다. 다시말해 data라는 곳에 요청한 데이터를 담아놓는 것.

const client = useApolloClient();

컴포넌트 생성 방식

-제어 컴포넌트 (controlled component)
데이터 변경시 해당 값을 받아 state에 저장
중요한 내용을 저장 및 입력에서 사용하는게 좋으나 비교적 느림-> 스테이트 변경 값을 저장하고 리랜더링하고 다시 보여줘야하기 때문
state의 값과 화면에 보여지는 값이 100% 같음을 보장할 수 있다.

-비제어 컴포넌트(uncontrolled component)
비교적 안정성은 떨어지나 속도가 빠르다.
state가 바뀌어도 페이지 리랜더링을 안하기 때문.
중요도가 떨어져도 괜찮은 데이터를 저장하고 출력할 때 사용하기 좋음.
react-hook-form은 비제어

React-Hook-Form

yarn add react-hook-form

++ '<form></form>' tag
input태그에 입력한 내용들은 전송하겠다 라는 의미의 태그
'<form onSubmit={} >' 을 통해 데이터를 API로 전송한다.
이때 전송는 버튼은 '<button>' 태그로 해줄 수 있는데 버튼 태그의 디폴트 타입은 submit이므로 '<form onSubmit={} >' 에 지정된 함수를 실행한다.
따라서 이런 경우 다른 동작을 하는 버튼을 원한다면 '<button type=‘button’ />' 이런식으로 버튼이라고 명시를 해준 후 onClick 등의 이벤트를 걸어야 한다.

단, react-hook-form에서 form태그를 사용해도 데이터를 전송하거나 하지는 않음

++비동기 통신(AJAX)
입력을 받을 때 현재 위치에서 페이지 전환이 이루어지지 않고 데이터의 통신만 이루어 지는 방식을 말함

Validation 라이브러리, Yup

yarn add yup 
yarn add @hookform/resolvers // hookform과 yup을 함께 사용하기 위해 설치하는 라이브러리

Common-Component

공통으로 사용하는 태그를 컴포넌트로 만들어서 임포트해서 사용하는 방법.
단 페이지에서 태그를 임포트해오는 경우 type 등의 추가 요소는 props로 넘겨서 임포트된 태그 컴포넌트에서 받아서 지정을 해줘야 적용된다.

**퍼사드(성벽) 패턴
컴포넌트 안에서 사용되는 여러 함수를 공통 컴포넌트로 빼놓고 필요한 공간에서 호출하여 사용하는 방식- for refactoring