💡최초 구현: useEffect + useState 조합

처음 데이터를 가져오기 위해서 useEffect + useState 조합을 사용했었다.

// useEffect + useState 방
useEffect(() => {
  setIsLoading(true)
  usingRoomUserList()
    .then(data => setMatchingList(data))
    .catch(err => console.error(err))
    .finally(() => setIsLoading(false))
}, [])

제일 일반적으로 많이 사용하는 방법이긴 하지만 몇가지 아쉬운 점이 있었다.

• 데이터 로딩, 오류 처리, 상태 저장을 직접 모두 다뤄야함
• 가독성 부분에 좋지 않음
• 컴포넌트가 마운트될 때마다 API를 새로 호출해야함

반복적인 API 요청과 로딩 상태 관리 코드를 줄이고, 더 안정적이고 예측 가능한 서버 상태 관리 구조를 만들기 위해 useEffect 방식에서 TanStack Query 기반 구조로 리팩토링하게 되었다

🔁 리팩토링 목표

• 기존 useEffect + useState 조합을 useQuery로 전환하기

1. 코드 간결성
   • useEffect 내 비동기 호출, 로딩 상태 및 에러 상태 관리를 모두 직접 작성하던 코드를 한 줄의 useQuery 호출로 대체할 수 있다
2. 자동 로딩·에러 관리
   • useQuery는 내부적으로 비동기 상태(pending, fulfilled, rejected)를 관리하여 isLoading, error, data를 제공하며, 별도의 try/catch나 setState 로직 없이도 사용할 수 있다.
3. 캐싱 및 백그라운드 업데이트
   • staleTime, cacheTime 설정으로 데이터를 캐싱하고, 데이터가 오래되지 않았을 때 재요청을 방지한다.
   • 백그라운드에서 자동으로 데이터 갱신(refetchOnWindowFocus, refetchInterval) 설정도 가능하여 UX를 개선에 유용하다.
4. 전역 상태 공유
   • 동일한 queryKey를 사용하는 컴포넌트들 간 데이터를 공유할 수 있어, 별도 전역 상태 관리 코드를 작성하지 않아도 된다.