React Query 리액트 쿼리

React Query 리액트 쿼리

안녕하세요 TriplexLab입니다.

오늘은 React Query 리액트 쿼리에 관해서 이야기를 공유하려고 합니다.

이번 글은 항해 99 7기 실전 프로젝트 4주 차를 지나면서 실제로 있었던 에피소드입니다.

먼저 React Query(리액트 쿼리)에 관한 자세한 내용은 다음 링크를 참고해주세요. [링크 참고]

👉🏻도입한 이유

저희 프론트 팀이 React Query(리액트 쿼리) 기술을 도입한 이유 중에 하나는 React Query에서 제공해주는 다양한 부가 옵션들이
많고, 소스 코드가 간결해서 유지보수에 좋을 것 같다는 판단을 하여 도입하게 되었습니다.

다양한 부가 옵션을 사용하는 입장에서는 잘 알고 사용하면 약이지만 모르고 그냥 사용하면 독이 된다는 사실을 다시 한번 깨닫게 되었습니다.

그 사례를 설명하기 앞서 먼저 배경 설명을 잠깐 하자면 저희는 socket.io를 사용해서 실시간 채팅 구현했습니다.
그래서 socket에서 제공해주는 이벤트들과, 백엔드에서 만들어준 API를 사용해서 구현했습니다.

👉🏻채팅방 입장시 API호출를 2번연속으로 하는 문제

내가 격은 문제의 상황

🤦🏻  문제 상황

• 나와 대화를 했었 상대방을 클릭하여 그 채팅방에 입장을 하는 순간 서버에 API호출를 2번연속하는 상황 유튜브[링크 참고]

🙆🏻 해결 방안 1️⃣

• enabled 옵션을 사용하여 채팅방에 접속할때 자동으로 실행 되는것을 막는 방법

enabled: boolean
(이 쿼리가 자동으로 실행되지 않도록 하려면 이를 false로 설정하십시오.)

🙆🏻 해결 방안 2️⃣

• refetchOnMount:"always" 옵션을 사용하지 않는방법

refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")
Defaults to true
- true로 설정하면 데이터가 오래된 경우 쿼리가 탑재 시 다시 가져옵니다.
- false로 설정하면 쿼리가 마운트 시 다시 가져오지 않습니다.
- "always"으로 설정하면 쿼리는 마운트 시 항상 다시 가져옵니다.
- 함수로 설정하면 값을 계산하는 쿼리와 함께 함수가 실행됩니다.

나는 "해결 방법2"으로 문제를 해결했습니다.
사실 refetchOnMount:"always" 옵션을 사용하면 오래된 데이터가 있으면 다시 데이터를 불어와준다고 해서 마냥 좋은거구나 라고 생각해서 무작성 옵션에 추가했던것 같네요...

이 옵션을 추가 해주므로써 위에 문제 처럼 항상 API호출를 2번연속으로 합니다. 저는 저 옵션때문에 2번 연속으로 호출하는지 모르고 
내가 뭐 잘못작성했나?... 라는 생각으로 이 문제만 하루 반정도를 소비했습니다.😂😂

이런 원인을 프론트팀끼리 공유했고 마침 다른 팀원이 예약시스템 쪽에서도 해당옵션을 사용하고 있어서 이런 문제를 다 같이 해결할수 있었습니다.👍👍  비록 하루 반이라는 사간을 소비는 했지만 짚 요하게 이 문제를 해결하기위해서 많이 고민했다라는 점과, 얻어가는것도 있어서 만족하고 있습니다.😁👍 

🧑🏻‍💻느낀점

사실 공식 문서만 잘 봐도 이런 것 때문에 시간 낭비는 하지 않을 거라 생각을 합니다...
그래서 공식 문서의 중요성을 다시 한번 깨닫게 되었고, 옵션을 추가할 때 반드시 어떤 역할을 하는 옵션인지 제대로 알고 사용해야겠다는 것을 교훈으로 얻었습니다.!!

👉🏻해당 코드 공유합니다.

feat: chatting room에 접속시 서버에 API 호출 2번연속으로 하는 문제 해결 · PetSitt/petsitt_frontend@208d95e

👉🏻공식문서

Overview | TanStack Query Docs