react-query

데이터 fectching, 캐싱, 동기화, 서버쪽 데이터 업데이트 등을 쉽게 만들어 주는 react 라이브러리

왜 사용하는 걸끼?

불필요한 코드의 감소

다른 라이브러리에 비해 보일러플레이트가 적어 사용자 경험측면에서 좋다

다양한 built-in 함수

빌트인 함수를 통해 loading상태, error확인 등을 쉽게 할 수 있다

캐시처리

데이터를 자동으로 주기적으로 최신 데이터로 갱신해준다

기본 설치

npm i @tanstack/react-query
npm i -D @tanstack/eslint-plugin-query //eslint

사용법

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
      //const queryClient = useQueryClient();
    </QueryClientProvider>
  );
}

useQuery

const { data } = useQuery(
  queryKey, // 이 Query 요청에 대한 응답 데이터를 캐시할 때 사용할 Unique Key (required)
  fetchFn, // 이 Query 요청을 수행하기 위한 Promise를 Return 하는 함수 (required)
  options, // useQuery에서 사용되는 Option 객체 (optional)
);

function UserInfo({ userId }) {
  const { isLoading, error, data } = useQuery(
    // 'userInfo', userId를 Key로 사용하여 데이터 캐싱
    ['userInfo', userId],
    () => axios.get(`/users/${userId}`)
  );

  if (isLoading) return <div> 로딩중... </div>;
  if (error) return <div> 에러: {error.message} </div>;
  return <div> {...} </div>;
}

queryKey는 유니크하기 때문에 이를 통해 서버상태를 로컬에 관리하고 캐시한다.

queryKey는 문자열 뿐만아니라 객체, 배열 등 다양한 형태가 될 수 있다.

useMutate

const { mutate } = useMutation(
  mutationFn, // 이 Mutation 요청을 수행하기 위한 Promise를 Return 하는 함수 (required)
  options // useMutation에서 사용되는 Option 객체 (optional)
);

const { mutate } = useMutation(suggest => axios.post('/menu', { suggest }), {
  // Post 요청이 성공하면 위 useQuery의 데이터를 초기화합니다.
  // 데이터가 초기화되면 useQuery는 서버의 데이터를 다시 불러옵니다.
  onSuccess: () => queryClient.invalidateQueries('getMenu'),
});

get이 아닌 post 등 사이드이펙트가 발생할때는 useMutation을 사용한다.

useQueries

const userQueries = useQueries(
     users.map(user => {
       return {
         queryKey: ['user', user.id],
         queryFn: () => fetchUserById(user.id),
       }
     })

useQuery 여러 개를 수행할 수 있다.

enabled: true 해당 옵션을 통해 원하는 조건일때만 문을 실행하게 한다.

axios

그냥 사람들이 fetch보단 axios를 많이 쓰는 것 같아서.. 이유가 있지 않을까?

• 자동으로 json 변환
• header 작성하지 않아도 됨
• 네트워크 공격으로부터 방어
• response timeout을 통해 특정시간이 넘기면 timeout을 걸 수 있다.

json 자체 변환이 있기 때문에, axios.get().then().catch()구문을 사용해 then함수에 성공시, catch함수에 실패시 원하는 동작을 넣어 가독성을 높일 수 있다.

쿠키 세션 캐시 토큰

쿠키

클라이언트 로컬에 저장되는 키와 값이 존재하는 작은 파일

세션

클라이언트 정보를 서버에서 저장 및 관리

토큰

암호화된 정보

캐시

데이터에 빠르게 접근하기위해 백그라운드에 저장하는 것

보통은 로그인을 하면 서버에서 쿠키에 토큰을 넣어 주고, 이를 가지고 인증한다.