떠오르는 전역상태 라이브러리, 리액트 쿼리

임동현·2022년 5월 24일
4
post-thumbnail


요즘 리액트 쿼리에 대해 관심이 많아서 찾아보다가 React-Query로 상태관리를 할 수 있다는 글을 봤습니다.

🙋‍♂️ 문제점

먼저 리덕스나 Mobx같은 전역상태 관리 라이브러리가 상태관리로 많이 쓰여지고 있는데, 왜 비동기 통신 라이브러리인 React-Query 로 상태관리를 하는 것일까요? 그 이유는 리덕스나 mobx의 경우 상태를 추가할 때 마다 엄청난 양의 보일러 코드가 생겨나기 때문입니다. 상태관리 라이브러리는 Client State를 관리하기 위해 쓰는 것인데, 리덕스나 mobx같은 라이브러리를 사용할 때 Server State뿐만 아니라 비동기 통신 코드까지 리덕스나 mobx안에서 처리하게 됩니다. 그러면 점점 스토어의 용량은 커지게 되고, 유지보수는 더욱 힘들어지게 됩니다. 바로 이부분을 해결하고자 React-Query로 상태관리를 하는겁니다.

⚙️ 원리

React-Query는 기본적으로 useQuery라는 메서드를 사용합니다. useQuery는 다음과 같은 형식으로 구성돼있습니다.

const {data} = useQuery("key", 프로미스 함수);

useQuery를 통해 프로미스 함수를 동작시키게 되고, QueryClient에 위에 적은 key를 기준으로 데이터가 저장되고 캐싱됩니다. 만약 다른 컴포넌트에서 위 코드를 똑같이 실행시키면 다시 요청을 보내지 않고 캐싱된 데이터를 가져오게 됩니다. 바로 이부분에서 전역으로 상태를 관리할 수 있는 것입니다.

🔑이점

React-Query로 상태관리를 하게 되면 여러 이점들이 있지만, 제일 중요한 이점은 React-Query에서 제공해주는 라이브러리 내 비동기 관련 기능(폴링, 로딩, 캐싱 등)들이지 않을까 싶습니다.
useQuery, useMutation 등 과 같은 훅을 사용하면 비동기 통신을 한줄에 끝낼 수 있습니다. 그리고 SSR환경에서도 React-Query를 사용할 수 있습니다.

리액트쿼리는 레전드다 진짜...

마치며

요즘 리액트 쿼리에 대해서 열심히 공부중인데, 아직 useMutation과 useQuery 옵션을 100% 다 활용하지 못하는 것 같습니다.. 사실 React-Query로 전역상태를 관리하는 것도 useQuery로 하는게 맞나..라는 의문점이 생기긴 합니다. 좀 더 열심히 구글링을 해봐야겠네요..!

참고

공식문서
React Query로 서버 상태 관리하기
Store에서 비동기 통신 분리하기 (feat. React Query)
React-Query 사용법 및 쓰는 이유
React-Query 살펴보기

profile
깊게 알기 위해 노력하는 주니어 프론트엔드 개발자입니다 😎

2개의 댓글

comment-user-thumbnail
2022년 7월 8일

클라이언트 상태관리와 서버 상태관리를 다른 라이브러리를 사용해서 관리하는 경우도 있더라고요!

답글 달기
comment-user-thumbnail
2022년 10월 5일

리액트 쿼리 너무 좋네요 저도 빨리 공부해서 사용해야겠어요

답글 달기