클라이언트 상태 (Client State)
: 웹 사이트 메뉴의 열림이나 닫힘, 사용자의 버튼 클릭 여부 등 UI 상태 혹은 유저가 입력 폼에 입력한 데이터 등 서버와 무관하게 웹 브라우저에서만 사용되는 데이터.
서버 상태 (Sersver State)
: 서버에서 가져오는 데이터. 예를 들어 네이버에 접속했을 때 보이는 기사, 글 등.
서버에서 데이터를 받아오기까지 시간이 걸리므로 이 과정을 비동기식으로 구현한다. 실제로 데이터가 오기까지 플레이스홀더를 보여주거나 로딩 처리를 하고, 에러 발생 시 어떻게 처리하고 유저에게 안내할지 고민 필요.
서버 데이터 상태는 가능한 한 최신 상태로 유지되어야 한다. 데이터를 한 번 받아오면 끝나는 게 아니라 최신 데이터를 계속 받아와야 한다. 사이트의 성격에 따라 최신 데이터 유지의 기준이 달라진다. 주식 사이트는 1분 1초가 중요하지만 또 어떤 사이트는 5분에 한 번 받아오기도 한다.
서버 상태는, 클라이언트 상태와 달리 다양한 시나리오가 요구되므로, 그 특성에 맞는 대응을 돕기 위해 TanstackQuery가 등장한다.
쿼리(Query)
백엔드에서 데이터를 받아오기 위해 리액트에서 제공하는 useQuery() 훅을 사용. 쿼리란 '문의하다, 질문하다'라는 뜻의 단어인데, 데이터 베이스에 우리가 필요한 데이터를 요청하는 것을 말한다.
🖥️ src/api.js
const BASE_URL = 'https://learn.codeit.kr/api/codestudit';
export async function getPosts() {
const response = await fetch(`${BASE_URL}/posts`);
return await response.json();
}🖥️ src/HomePage.js
import { useQuery } from '@tanstack/react-query';
import { getPosts } from './api';
function HomePage() {
const result = useQuery({ queryKey: ['posts'], queryFn: getPosts });
console.log(result);
return <div>홈페이지</div>;
}
export default HomePage;useQuery()의 리턴값
1. 데이터
data에는 백엔드에서 받아온 데이터들이 들어있다. response 바디로 받은 데이터가 객체로 되어있고, 페이지네이션에 필요한 정보들과 함께 results란 항목에 실제 포스트 데이터가 배열로 들어가 있다.
2. 데이터를 받아온 시간
dataUpdatedAt 항목은 현재의 데이터를 받아온 시간을 나타낸다. 이 시간을 기준으로 데이터 refetch의 시점을 정한다.
3. 다양한 상태 정보
isError, isFetched, isPending, isPaused, isSuccess 등의 다양한 상태 정보 확인 가능.
status 항목에 적힌 success는 데이터를 받아오는 데 성공했다는 뜻.
출처 : 코드잇
