1️⃣ 단계 : WHY 질문 & 멘탈 모델 가설 수립

• 스스로에게 던지는 질문

  • React-query는 왜 필요한가?

    음 .. React-query가 뭔지를 모르겠어서 답변을 못하겠다 ㅎㅎ

    https://tanstack.com/query/latest/docs/framework/react/overview

    흠. 서버와의 API통신을 더 자유롭게 or 더 편리하게 사용하기 위해서?

  • 그럼 어떤 문제를 해결하기 위해서 사용하는건가?

    서버 상태 연결을 위해서? 공식문서에서 말하길, 기존의 상태 관리 라이브러리들은 클라이언트 상태 처리에는 적합하지만, 비동기 또는 서버 상태 처리에는 적합하지 않다고 한다.

    그럼 JS에서의 비동기 상태 처리에 적합한 친구가 아닐까! 하는 생각 (잘 모르겟음)

• 정보 탐색 (AI, 공식 문서 '개요', '개념' 섹션 활용):

  • React-query는 React 에서의 서버상태를 효율적으로 관리하기 위해서 만들어진 라이브러리다. UI 상태와 달리 서버 상태는 외부에서 가져와야함 + 변동가능 ⇒ 까다로움

    but, React-query가 이 과정을 대신 해준다.

  • 기존의 다른 상태관리 라이브러리와의 차이점

  기능	useEffect + fetch	Redux	Axios	React Query
  상태 저장	❌	✅	❌	✅
  캐싱	❌	직접 구현	❌	✅
  로딩/에러 핸들링	수동	직접 구현	수동	✅
  백그라운드 리패치	❌	직접 구현	❌	✅
  Devtools 제공	❌	✅	❌	✅

  • 언제 쓰면 좋은가?
    • 외부 API에서 데이터를 자주 가져와야 할 때
    • 여러 컴포넌트가 동일한 데이터를 공유할 때
    • 데이터 페칭, 캐싱, 갱신 주기를 관리하고 싶을 때
    • 복잡한 로딩/에러 상태 로직을 줄이고 싶을 때

나만의 멘탈 모델 (가설) 정리:

• 그럼 React-query는 React에서 서버 상태를 관리해야 할 때 개발자가 서버의 상태관리를 더 쉽게 도와주는 친구구나
• 기능들을 일일이 관리할 필요 없이 제공해주는 기능 만으로도 상태를 관리할 수 있고, 캐싱과 같은 기능이 내제되어 있어서 최적화까지 도와줄 수 있는 좋은 애다.

<aside> 💡

공식문서를 통해 드는 생각 (궁금증)

• useQuery 를 통해서 4개의 상태를 보여주고 있는 것 같다.
  • isPending, error, data, isFetching.이렇게 4개의 상태를 가짐 </aside>

2️⃣ 단계 : DO (실전 적용 & 문제 해결)

Query Simple Example - StackBlitz

ME : URL을 일부러 잘못 전달해도 일정시간 loading이 걸리다가 error 가 표시된단 말이야. 왜 일정 시간의 간격이 있어?

GPT

원인 1: fetch() 자체가 비동기이고, response.ok 검사 이후에야 throw 되기 때문

queryFn: async () => {
  const response = await fetch(...); // ✋ 이 라인에서 fetch가 완료되기까지 기다림
  if (!response.ok) throw new Error(...); // ❗ 여기서야 error로 전환됨
  return await response.json();
}

fetch()는 실제로 네트워크 요청을 보내고, 응답을 받을 때까지 비동기 대기 시간이 발생합니다.

이 시간이 바로 loading 상태로 보이는 구간입니다.

원인 2: React Query의 retry 정책 (기본: 3회, 1초 간격)

React Query는 기본적으로 에러가 발생하면 자동으로 3번까지 재시도합니다.

→ 이때 error 상태로 전환되기 전에 로딩 상태가 유지됩니다.

⇒ 옹 이부분이 좀 신기한 것 같다. (근데 확실하진 않아서 더 보긴 해야할 것 같음 )