React Query와 커스텀 훅

최근에 진행중인 프로젝트에 들어가서 처음으로 작업한 것은 컴포넌트별로 구현되어있던 API 호출 로직을 useHook과 react-query를 사용하여 리팩토링 진행이었다.

어렴풋이 커스텀훅과 react-query에 대해 알고있었어서, 이번 기회에 좀더 제대로 공부해서 지식을 습득하고자 공식문서와 블로그들, 코드참조한 내용을 정리해보려고 한다.

커스텀 훅을 알기 위해선 먼저 훅이 뭔지 알아보자

훅이란 ?

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다.

react 내장 훅 : useState, useEffect, useReducer 등등

커스텀 훅이란?

커스텀 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있는 함수를 뜻

사용자 정의 Hook은 이름이 use로 시작하는 자바스크립트 함수이다. 사용자 Hook은 다른 Hook을 호출할 수 있음

react-query란?

React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리이다. React Query는 우리에게 친숙한 Hook을 사용하여 React Component 내부에서 자연스럽게 서버(또는 비동기적인 요청이 필요한 Source)의 데이터를 사용할 수 있는 방법을 제안한다.

React Query는 API 요청을 Query 그리고 Mutation 두 가지 유형으로 나누어 생각한다

useQuery

useQuery Hook으로 수행되는 Query 요청은 HTTP METHOD GET 요청과 같이 서버에 저장되어 있는 “상태”를 불러와 사용할 때 사용한다.

useQuery를 코드로 작성하여 구현하기 위해서는 다음 2가지 개념을 알고 있어야 한다. queryKey와 queryFn

useQuery Hook은 요청마다 구분되는 고유 Key값 Query Key 를 필요로 한다.

왜냐하면 React Query는 이 Query Key로 서버 상태를 로컬에 쿼리 캐싱을 관리하기 때문이다.

queryFn은 query Function으로 promise 처리가 이루어지는 함수라고 생각하면 됩니다. (axios를 이용해 서버에 API요청하는 코드)

프로젝트에서는 service 클래스를 따로 만들어서 분리해서 구현하였다.

export const useFindAllBooks = () => {
  const { userId } = useUserIdStore();

  return useQuery({
    queryFn: () => BookService.getAllBooks({ userId }),
    queryKey: ['books'],
    enabled: !!userId, //쿼리를 실행할지 여부를 결정하는데, 사용자 ID가 존재할 때만 쿼리를 실행하도록 한다
    onError: () => alert('룩북 정보를 불러오는데 실패했습니다.'), //쿼리 실패 시 실행되는 함수
  });
};

enabled는 는 쿼리가 자동으로 실행되지 않게 설정하는 옵션이다.

useMutation

useMutation Hook으로 수행되는 Mutation 요청은 HTTP METHOD POST, PUT, DELETE 요청과 같이 서버에 Side Effect를 발생시켜 서버의 상태를 변경시킬 때 사용한다.

useMutation Hook의 mutationFn은 이 Mutation 요청을 수행하기 위한 Promise를 Return 하는 함수이며, useMutation의 return 값 중 mutate(또는 mutateAsync) 함수를 호출하여 서버에 Side Effect를 발생시킬 수 있다.

export const useSignup = (
  email: string,
  password: string,
  username: string,
  onSuccess: () => void
) => {
  return useMutation({
    mutationFn: () => UserService.signup(email, password, username), //mutationFn 속성에는 비동기 작업을 수행할 함수를 제공
    onSuccess: onSuccess,
    onError: () => alert('다시 회원가입 해주세요.'),
  });
};