요약
- client component에서 fetch하는 걸 용이하게 해준다.
- page(server)->component(client) 구조에서는 대부분 불필요하다.
- 2번의 경우라도 client component에서 추가적 fetch가 필요할 경우에 제한적으로 필요하다.
불필요할 때: 기본 구조일 때
page: server component
page.tsx는 server component로만 구성한다. 그리고 필요한 데이터는 여기서 모두 fetch한다.
component: client component, if needed
Component.tsx는 필요시 client component로 한다. 필요한 데이터는 모두 page.tsx로부터 상속받는다.
필요할 때: user action으로 변한 데이터를 새로고침 없이 보여줘야 할 때
예시 시나리오
마트 앱을 생각해보자. 유저가 물건 카드 옆의 카트 버튼을 눌러서 장바구니에 그 물건을 담았다. (페이지는 그대로이다.) 그리고 상단의 장바구니 아이콘에 마우스를 올리면 현재 담긴 물건들을 보여주고 싶다고 해보자.
1. 유저의 행동은 client component에서 이뤄진다.
2. 유저의 행동은 새로고침 없인 server component에 영향을 주지 못한다.
3. 유저의 행동으로 인한 데이터의 변화를 보기 위해선 React Query가 필요하다.
사용하려면
- api endpoint를 만들어야 한다.
- provider wrapper를 설정하고
layout.tsx의<body>태그 안을 감싼다.
./app/api/QueryClientProvider.tsx
"use client"
import { PropsWithChildren } from 'react'
import {
QueryClient,
QueryClientProvider as ReactQueryClientProvider
} from '@tanstack/react-query'
const queryClient = new QueryClient()
const QueryClientProvider = ({ children }: PropsWithChildren) => {
return (
<ReactQueryClientProvider client={queryClient}>
{ children }
</ReactQueryClientProvider>
)
}
export default QueryClientProvider- client side fetch가 필요한 component에서 query를 한다.
const { isPending, error, data, isFetching } = useQuery({ queryKey: ['users'],
queryFn: () => axios.get("/api/users").then(res => res.data)
})헷갈리는 것
isPending vs isFetching
isPending: 캐시 없이 처음으로 fetch를 하는 중이다.
isFetching: 캐시된 데이터에서 fetch를 하는 중이다.
하기 쉬운 실수
useQueryvsuseQueries: 단수, 복수 차이
