React-Query 리액트 쿼리 도입 및 후기 (1)

회사에 들어온 후  React-Query에 대한 도입을 회사 내부에서 고민을 하고있을때  

 

신규 프로젝트 백오피스를 제작하며 React-Query를 가장 먼저 도입해서 사용을 해보았다. 

 

해당 백오피스를 처음 제작할때 사용했던건 Next.js, 전역상태관리를 위한 recoil, emotion styled-component 정도만 정해두고 사용하고 있었다. 

 

하지만 데이터 패치 관련하여 recoil에서 커버가 불가능한 부분이 점점 생겨나기 시작했고, 이에대한 해결방안을 모색하던중 많은 기업에서 react-query를 도입하고 있고 왜 react-query를 도입했는지 이유 또한 충분히 납득이 갔기에 나도 한번 채택하여 사용해보기로 하였다. 

 

우선 react-query를 사용하기전 기존의 방식은 아래와 같은 순서로 점차 변해갔었다. 

 

1. 일반적인 fetcher 함수를 통해 API통신을 한다. 받아온 데이터를 props로 점차 내려 하위 컴포넌트에서 사용한다. 

 

2. 일반적인 fetcher 함수를 사용하고 받아온 데이터를 전부 recoil에 저장하여 recoil을 통해 전역 상태로 데이터를 관리하고 모든 컴포넌트에서 자유롭게 접근해서 데이터를 사용한다. 

 

3. recoil의 selector를 통해 데이터를 get, set을 진행하고 해당 데이터를 전역으로 관리한다. 

 

위에처럼 1번부터 3번까지 백오피스 프로젝트를 진행하며 점점 나의 사고방식이 바뀌어 갔었는데 기존의 recoil만으로 충분히 커버가 가능했고 recoil이 사용성도 편했기 때문에 react-query 도입에 대해서 고려를 해보지 않았었다. 

 

하지만 회사에서 기본 프론트엔드 기술스택을 next.js 사용을 지향하고 있었으며 recoil은 SSR을 지원해주지 않았기 때문에 결론적으로는 recoil만 가지고 서버에서 불러온 데이터를 사용하기에는 무리가 있었다. 

 

결국 더 좋은 방법을 찾던중 react-query의 도입을 고려해보았고, react-query를 시범적으로 해당 프로젝트에 처음 사용해보기 시작했다. 

 

그래서 어땠나??

결론부터 말하자면 react-query를 도입하고 나서 코드에 대한 만족감과 질이 굉장히 높아졌다고 생각한다.

 

우선 기존에 react-query를 왜 사용해야 하는지에 대해서 먼저 정의할 필요가 있었는데, 내가 직면했던 문제들을 나열해 보자면 

 

1. 기존 데이터 패치를 좀 더 효율적으로 하는 방법은 없을까?

2. recoil에 전부 담아서 쓰는건 좋지만.... ssr을 지원해주진 않고... 그리고 항상 어떤 데이터를 불러올때 마다 전역으로 관리하는게...? 그래도 redux처럼 보일러 플레이트가 늘어나진 않지만..... 이게 맞을까?

3. 난 결국 server 단에서 일어나는 데이터에 대해서만 관리를 하고 싶은데 recoil만으로 관리를 하는게 맞을까? 

 

위에 3가지 생각들이 큰 관점에서 보면 비슷비슷한 이야기들이고 한마디로 요약을 하자면, server로 부터 받아오고, 변화하는 데이터들을 관리할 다른 방법이 필요하다! 이다. 

 

react-query는 본인들 스스로 최고의 server 관리 라이브러리 라고 소개를 하고 있으며, 이에 걸맞게 useQuery, useMutation, useInfiniteQuery, useFocusOn 등 많은 Hook들을 제공해주고 각 Hook들에 대해 많은 옵션을 제공해준다. 

 

react-query에서 제공해주는 이러한 기능들이 결국 퍼포먼스 향상에 큰 도움을 주었고 무엇보다 SSR을 더 최적화 시켜 사용할 수있다는게 가장 큰 장점이였다. 

 

여기까지가 react-query 도입에 대한 후기이고 다음 글부터 react-query 사용 예시를 적어보려한다.