React Query는 그냥 쓰자..

React Query는 React web이건 React native건 데이터 가져오거나 보낼 때 무지성으로 사용하자

 

fetch를 이용해 날씨를 가져온다고 가정해보면...

const weatherQuery = 
await fetch(`https://api.openweathermap.org/data/2.5/weather?q=SEOUL&appid=87d867200b06df0b91f9e7399bdXXXXX`)
.then((res) => res.json());

 

 

이렇게 하면 간단하게 서울의 현재 날씨를 가져올 수 있어. 이건 쉬운데.. 관리가 어렵겠지..

같이 생각해 보자고 단순히 fetch만 하면 얼마나 좋겠어? 하지만 때로는 fetch할 때 timeout을 설정해야 하고, 데이터의 만료 시간을 설정해야 하고 또 어쩔때는 10분마다 갱신이 되어야 하고, 데이터 전송 낭비를 막기 위해 캐시를 사용해야 할 수도 있어

바쁘다 바빠 현대 사회 알쏭달쏭 모바일 세상에서 해당 기능들을 전부 구현하고자 한다면 말리지는 않겠지만 그게 아니라면 React Query를 쓰자

 

아래 코드처럼 useQuery hook으로 간단하게 사용할 수 있는데 이렇게 React Query로 fetch를 한번 감싸주는 것만으로 위에서 말한 모든 기능을 사용할 수 있어

const weatherQuery = useQuery(
	["weatherQuery"],
	fetch(`https://api.openweathermap.org/data/2.5/weather?q=SEOUL&appid=87d867200b06df0b91f9e7399bdXXXXX`)
	.then((res) => res.json()),
  );

 

단순 데이터 패치를 위한 useQuery는 기본이고 useInfiniteQuery hook은 flatlist와 함께 무한 스크롤 구현에 활용되고(거의 필수임) 데이터 업로드를 위한 useMutation hook도 개인적으로는 상당히 유용하게 활용하고 있어

 

아무튼 결론은 이거임

 

"React 프로젝트에서 데이터 패치할 때는 무조건 React Query를 사용하자."

 

이미 유명한 라이브러리라 내가 다시 설명하는게 큰 의미가 없겠지만 react native에서 firestore와 함께 사용되는 특정한 상황에서 이슈가 있을 수도 있으니까 프로젝트 진행중에 뭔가 공유할게 있으면 글을 업로드하는 것으로!