서버 상태와 클라이언트 상태

1. 서버 상태와 클라이언트 상태

서버 상태란 서버에서 관리되는 데이터를 의미한다.
데이터베이스, 웹 서버 메모리에 저장되고 상태가 관리되는 특징이 있다.
보통 벡엔드에서 받아오는 api json 파일이 백엔드 서버에서 관리된다.
예시로는 사용자 목록, 유저 데이터 등 데이터베이스에서 관리되는 상태를 서버 상태라고 한다.

Code

{
  "user": {
    "id": 1,
    "username": "example_user",
    "email": "user@example.com",
    "bio": "Software engineer interested in web development.",
    "followers": 500,
    "following": 200
  }
}

클라이언트 상태란 클라이언트에서 관리하고 유지되는 데이터를 말한다.
웹 페이지에서 모달이 열렸는지, 버튼이 눌렸는지 등 웹 페이지에서 보여지는 데이터를 클라이언트 상태라고 한다.
클라이언트 상태는 브라우저에 저장되는 쿠키, 로컬이나 세션 스토리지 등 다양한 방법으로 관리된다.
당장 생각이 든 예시는 fetch된 데이터를 변수에 담아주고 관리한다면 이 변수도 클라이언트 상태의 예시일 것 같다.

2. TanStack Query가 상태 관리에 좋은 이유

1. 캐시 제어가 가능하다.
TanStack Query는 캐시 제어가 가능하다.
캐시란 데이터를 미리 복사해 놓는 임시 장소를 말한다. 저장 공간이 작지만 데이터를 가져오는 속도가 매우 빠르다는 장점이 있다.
사용자가 같은 홈페이지를 반복해서 이용한다면 데이터를 다시 요청하지 않는한 캐시에 데이터를 저장하고 저장해놓은 데이터를 보여주는 "캐싱"이라는 방법을 활용할 수 있다.

Code

// 데이터 가져오는 비동기 함수 설정
const fetchData = async () => {
  const response = await fetch('api/data');
  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }
  return response.json();
};
// fetchData 사용
const Test = () => {
	const { data, isLoading, isError } = useQuery('myData', fetchData);
}

useQuery는 첫 번째 인자로 쿼리 키를 받고, 두 번째 인자로는 데이터를 가져오는 fetchData를 받는다. fetchData에서 성공적으로 데이터를 가져온다면 data라는 변수로 값이 저장된다.
여기서 첫 번째 인자로 받은 쿼리 키를 활용하여 캐시된 데이터를 확인, 사용이 가능하다.
데이터를 가져올 때 myData라는 쿼리 키에 대한 캐시가 존재한다면 캐시에 저장되어 있는 데이터를 활용하여 업데이트가 된다.

2. 오프라인 지원
TanStack Query는 오프라인 상태에서도 웹 동작이 가능하고, 선캐시를 통해 빠른 로딩으로 사용자의 경험을 향상시킬 수 있다.
예시로 사용자가 오프라인 상태에서 접근하게 된다면 TanStack query는 자동으로 웹 스토리지에 저장된 캐시 데이터를 활용하여 UI를 업데이트하고 상호작용이 가능하게 한다.

결론

TanStack Query를 활용하여 데이터를 관리한다면 서버 상태나 클라이언트 상태를 관리하기 훨씬 편해지고 사용자 경험면에서 매우 만족스러운 결과를 가져올거라고 생각한다. 다음 프로젝트에서 꼭 사용해봐야겠다! 그리고 TanStack Query가 오프라인 상태에서도 데이터를 불러올 수 있는데 오프라인이라는 상태를 어떻게 감지하는지 검색해봐야겠다..