# react-query를 도입하면서 느낀점

---

## react-query란?

`react-query` 공식문서에서 `react-query`는 `React` 내에서 **서버상태를** **가져오고**, **캐싱하고**, **동기화하고**, **업데이트** 하는 작업을 쉽게 하는 라이브러리로 설명하고 있다. 기존에 존재하던 라이브러리들은 비동기처리를 하는데 있어서 완벽하지 않다고 생각했었고, 비동기처리 후 클라이언트 단에서 사용하는 데이터(서버상태)를 더 쉽게 관리하기 위해서 만든 라이브러리라고 설명하고 있다.

## 캐싱

`react-query`를 도입하는 가장 큰 기능적인 이유라고 생각한다. `react-query`는 데이터를 캐싱해준다는 큰 장점을 가지고 있는데, 캐싱된 데이터를 사용하기 때문에 불필요한 fetching을 줄여 서버 부담을 줄일 수 있다.

하지만 간과하게 되는 사실이 하나 있는데 데이터의 무결성이다.
캐싱된 데이터가 최신의 데이터가 아닐 수도 있기 때문에 그 부분에 대한 설계가 필요하다. `react-query`에서는 이미 이 부분은 효율적으로 관리할 수 있게 staleTime과 cacheTime으로 구분해서 제공해주고 있다.
하지만 결국 유저에게 최신의 데이터를 보여줄 수 있도록 설계하는것은 개발자의 역량이다. 이 부분을 내부적으로 논의해서 정책을 정할 필요가 있다고 생각했었다.

내 경우에는 사내에서 CMS 프로젝트에 `react-query`를 처음으로 도입했었다. CMS 특성상 서버상태를 가져오고, 업데이트하는 것이 이미 캐싱된 데이터에도 영향을 줄 수 밖에 없었다. 그래서 해당 프로젝트에서 서버상태가 변경되는 action이 있는 경우 관련된 데이터들의 쿼리키도 동시에 해제하는 방향으로 설계를 했었었다.

## 블로그

`react-query`의 프로젝트 maintainer인 TkDodo의 블로그가 공식문서에 있는데, 이 블로그가 `react-query`를 사용하면서 대면하게 되는 문제들을 굉장히 잘 정리해놨다고 생각했다. 실제로 프로젝트를 하면서 이 블로그의 도움을 많이 받았었고, 한글번역까지 잘 되어있다. 실제 `react-query`를 프로젝트에 도입할 생각이 있다면, 이 블로그까지 꼭 다 읽어봐야 한다고 생각한다.

## 그래서 내 느낀점

써보면서 느낀 점은 개발자가 서버상태를 관리하면서 느꼈던 불편한 점들을 굉장히 많이 고려했다고 생각했다. 기존에 서버상태를 관리하는데 상태관리 라이브러리 + 미들웨어를 사용했다면 더욱 크게 체감할 것 이라고 생각한다.
하지만 데이터의 무결성을 유지하기 위해 노력해야 한다고 생각했다. 데이터가 결국에 stale하면 유저에게 정확한 정보 전달을 할 수 없기 때문이다. 이 부분만 고려한다면 서버 부담을 줄이는데 크게 도움이 되기 때문에 프로젝트에 도입하는데 있어서 우선적으로 고려해야하는 라이브러리가 아닐까 싶다.

## ref
- [react-query docs](https://tanstack.com/query/v4/docs/overview)
- [TkDodo's blog 한글 번역](https://parang.gatsbyjs.io/react/2022-react-01/)
