Graph-QL을 사용하면서 데이터를 조회할 때 기존 useQuery와 다르게 원하는 시점에서 실행할 수 있게 하는 Query들이 있다.
- useQuery : 화면이 렌더되면 apollo client가 자동으로 데이터 요청 실행
- useLazyQuery : 지정한 이벤트의 실행 여부에 따라 Query가 실행
- useApolloClient : 지정한 이벤트에서 실행이 되고 관련 데이터를 변수로 설정해서 활용 가능( useLazyQuery + axios )
정보를 입력하고 로그인을 한다고 가정했을 때,
//로그인 정보 입력 페이지
const client = useApolloClient();
const resultUserInfo = await client.query({
query: FETCH_USER_LOGGED_IN,
context: {
headers: { Authorization: `Bearer ${accessToken}` },
},
});
//global state 저장
const userInfo = resultUserInfo.data.fetchUserLoggedIn;
if (setUserInfo) setUserInfo(userInfo);
//로그인 이후 페이지
const { userInfo } = useContext(GlobalContext);로그인 이후 접속 가능한 페이지들(결제, 마이페이지 등)에 모두 로그인한 회원의 정보를 Query로 조회하기는 코드가 길어지고 번거롭다. 조회 시점을 설정할 수 있는 useApolloClient를 이용해서 회원 정보를 global state에 저장 -> 해당되는 모든 페이지에서 Query 요청없이 회원 정보를 받아올 수 있게된다.
💡 코드를 간략하게 짜기 위한 라이브러리들
- React-hook-form : 데이터를 받아오기위해 모든 코드를 직접 작성하지않아도 밸리데이션 체크 및 폼 관리가 가능한 라이브러리
const { register, handleSubmit } = useForm();
const onClickSubmit = (data: FormValues) => {
console.log(data); //입력한 데이터
};
<form onSubmit={handleSubmit(onClickSubmit)}>
작성자 : <input type="text" {...register("myWriter")} />
제목 : <input type="text" {...register("myTitle")} />
내용 : <input type="text" {...register("myContents")} />
<button>등록하기</button>
</form>useForm()으로 state를 등록하는데 필요한 모든 기능(onChange,onClick, onError 등)이 담겨있는 register에 데이터를 구분할 값을 넣어주는 과정.
⚡️ TIP !!
페이지 전환 없이 데이터만 주고 받는 비제어 컴포넌트 방식(ajax)이기 때문에 변경 사항에 대해 100% 정확도는 보장할 수 없다. 하지만 입력 시 마다 바뀐 변수로 화면을 다시 렌더링 하는 과정이 없기 때문에 속도가 빠르다. -> 이력서와 같은 대용량 텍스트 구현에 적합
- yup : 백엔드로 보내기 전 데이터 검증 라이브러리(정규표현식으로 데이터를 체크하지 않고 설정된 조건들로 데이터 검증 가능)
const schema = yup.object().shape({
myEmail: yup
.string() // 문자열
.email("이메일 형식이 적합하지 않습니다.") // 문자열 형식 검증
.required("이메일은 필수 입력 사항입니다.") // 빈칸일 경우
});
return(
<form>
<input type="text" {...register("myEmail")} />
<div>{formState.errors.myEmail?.message}</div>
//조건에 부적합하면 작성한 메세지 표출
</form>
)⚡️ TIP !!
React-hook-form 라이브러리와 함께 사용하기위해 @hookform/resolvers 함께 설치해주어야한다. 다른 라이브러리들과 함께 사용 가능
👩🏻💻 오늘의 TIL ...
자유게시판 등록 컴포넌트 코드가 100줄이 넘어서 더 이상 코드를 어떻게 줄일 수 있을까했었는데 오늘 배운 라이브러리들을 활용하면 더 깔끔하게 리팩토링할 수 있을 것 같다. 잊지말고 시도해보자.
✔️ 코드 깔끔하게 짤 수 있도록 연습
✔️ 자유게시판 등록, 상세페이지 UI 확정
✔️ 중고마켓 방향 설정
