React-Query는 서버 상태를 불러오고, 캐싱 하며, 동기화 및 업데이트 작업을 도와주는 라이브러리입니다.
RunWithMe의 핵심 기능 중 하나인 모집 참여 모집 참여 기능에서 사용할 API 명세를 작성하던 중 **“언제 참여 신청이 실패하는가?”**라는 질문이 나왔습니다.
서버가 정상적으로 살아있다면… 위 2가지 경우에만 참여 신청이 실패한다고 판단하였고
누군가가 신청을 하거나, 신청 기간이 지난 경우 값을 갱신해 주면 좋겠다고 생갔은 했지만…
일단 423 에러를 던져주자!!라고 결론을 내고 넘어갔었습니다.
참여 신청 화면
이후 사일런트 로그인 기능을 구현하고 접속 후 15분 주기로 서버에 새로운 AccessToken을 요청하게 되었는데, RefreshToken이 만료되거나, 사용자가 로그아웃을 하는 등 로그인 상태에 대한 변화가 있을 때에도 14분이 지나면 요청을 보내는 문제가 발생했습니다.
이때 서버 상태 관리(사용자의 인증 상태)에 대한 관리가 필요하다고 판단하여 서버 상태 관리를 위해 React-Query를 도입하게 되었습니다.
React-Query를 도입하면서 서버 상태 관리뿐만 아니라 React-Query에서 제공해 주는 여러 추가 기능을 통해 여러 문제를 해결할 수 있었습니다.
지속적으로 서버 상태를 동기화할 수 있었습니다.
→
React-Query는 응답 데이터에 대한 캐싱을 지원하고 있으며,이를 통해 API 호출을 줄일 수 있었습니다.
