React Query vs RTK Query

https://long-factory-3d5.notion.site/React-Query-vs-RTK-Query-314c654cf89d433abce0e5e5569b02e9

React Query vs RTK Query

 

1. React Query란 무엇인가?

• 서버와 클라이언트 간의 비동기 작업을 관리하는 서버 상태 라이브러리이다.
• React Query란 React 애플리케이션에서 서버 상태를 가져오고 , 캐싱하고 , 동기화하고 업데이트 하는 작업을 쉽게 만드는 라이브러리이다.

2. React Query를 사용하는 이유는 무엇인가?

• React 애플리케이션에서 서버 상태를 fetching하고, caching하고, 동기화하고, 업데이트를 용이하게 할 수 있도록 도와주기 때문에 사용한다.
• 공식 문서
  • React에서는 구성요소에서 데이터를 가져오거나 업데이트하는 고유한 방법이 제공되지 않기 때문에 결국 데이터를 가져오는 고유한 방법, 즉, 범용 상태 관리 라이브러리를 사용하여 앱 전체에 비동기 데이터를 저장하고 제공하는 것이 필요하다.
  • 다른 상태 관리 라이브러리들은 client 상태에서 사용하기 좋지만 async나 server 상태에서 사용하기에는 좋지 않다.
  • 앱 데이터를 제어할 수 있다.
  • 새로운 서버 상태 데이터 소스 연결에 대한 걱정 없이 애플리케이션을 유지 관리하기 쉽고 새로운 기능을 더 쉽게 구축할 수 있다.
  • 메모리 성능을 높이는데에 도움을 준다.
  • 글로벌 상태를 작게 관리한다.
  • Redux, MobX, Zusstand 등은 비동기 데이터를 저장하는 데 사용할 수 있는 클라이언트 상태 라이브러리이지만 React Query와 같은 도구와 비교할 때 비효율적이다. React Query는 클라이언트 상태에서 캐시 데이터를 관리하는 데 사용되는 상용구 코드를 간단하게 작성할 수 있다.
• Blog
  • 데이터 무효화 및 데이터를 오래된 것으로 표시하면서서버 데이터의 안정성을 향상시키는 유용한 도구를 제공한다.
  • https://medium.com/duda/what-i-learned-from-react-query-and-why-i-will-not-use-it-in-my-next-project-a459f3e91887

What I learned from React-Query, and why I will not use it in my next project

 

 

3. RTK Query란 무엇인가?

• RTK 쿼리는 데이터 fetching 및 caching 도구이다.
  • 웹 애플리케이션에서 데이터를 로드하는 일반적인 경우를 단순화하도록 설계되어 데이터 가져오기 및 캐싱 로직을 직접 작성할 필요가 없다.
  • RTK 쿼리는 Redux Toolkit 패키지에 포함된 선택적 기능이며 해당 기능은 Redux Toolkit의 다른 API 위에 구축된다.
  • Redux Toolkit의 createAsyncThunk API는 일반적인 패턴을 추상화하도록 설계 되어있지만 사용자는 로드 상태와 캐시된 데이터를 관리하기 위해 여전히 상당한 양의 리듀서 로직을 작성해야 한다.
  • Redux와 같은 상태 관리 라이브러리를 사용하여 데이터를 캐시할 수 있지만 RTK Query는 데이터 fetching 사용 사례를 위해 특별히 제작된 도구이다.

4. RTK Query를 사용하는 이유는 무엇인가?

• 이미 Redux app을 사용하고 있고 기존 데이터를 가져올 때 단순화 하기 위해서 사용한다.
• Redux DevTools를 사용하여 시간 경과에 따른 상태 변경 기록을 보고 싶을 때 사용한다.
• RTK Query 동작을 나머지 Redux ecosystem과 통합하기를 원할 때 사용한다.

5. React Query vs RTK Query

• React Query는 비동기 함수를 직접 관리하는 것이 아니어서 RTK Query와는 다르게 비동기 함수를 분리해서 작성한다.
• React Query는 유지보수에 편리하지만 스스로 패턴을 작성해야하기 때문에 하나의 slice에서 어플리케이션의 거의 모든 서버 통신 로직을 작성하는 RTK Query와 비교했을 때 불편함이 있을 수 있다.
• 참고자료
  • https://blog.webudding.com/react-query-vs-rtk-query-리액트에서-서버-데이터-처리하기-cb80aa413d60