redux와 react-query 설정

Question

다른 질문 들도 보다가 궁금한 점이 생겨 여쭤봅니다. 프로젝트에서 내에서 상태관리를 redux로 하고 server에서 데이터 패칭하는 부분을 (공부해 보니 server state라고 부르더군요) react-query(또는 swr)로 사용하려는 경우 설정을 어떻게 해야하나 궁금해서 검색해봤는데 마땅한 자료가 없어서 질문드려요 CRA기준으로 index.js에 import React from " react "; import ReactDOM from " react-dom "; import App from " ./App "; import reducer from " ./reducer "; import { Provider } from " react-redux "; import { configureStore } from " @reduxjs/toolkit "; import { Global } from " @emotion/react "; import { GlobalStyle } from " ./index.style "; import { QueryClientProvider , QueryClient } from " react-query "; const store = configureStore ( { reducer } ) ; const queryClient = new QueryClient () ; ReactDOM . render ( < Provider store = { store } > < QueryClientProvider client = { queryClient } > < App /> < Global styles = { GlobalStyle } /> , document . getElementById ( " root " ) ) ; 이런식으로 사용해서 reducer 함수 정의하고 각 컴포넌트에서 queryClient를 import해서 사용하는 건가요? 제로초님 강의 들으면서 react-query를 이제 막 공부하고 있는데 react-query가 내부적으로 contextAPI 사용한다고 알고있는데 redux랑 contextAPI를 같이 쓴다는게 정확히 감이 안잡히네요 제가 잘못알고 있는 부분이나 공부해야할 키워드를 알려주시면 감사하겠습니다.

homie · Answer

답변 감사합니다. 컨텍스트도 리덕스 스토어 처럼 프로젝트에 하나만 정의 해야 하는 줄 알았네요

zerocho · Answer

네 저런식으로 둘 다 각각 프로바이더 연결해서 내부 컴포넌트에서 훅으로 데이터작업 하시면 됩니다. 컨텍스트는 여러개 생성 가능해서 하나는 리덕스 주고 하나는 리액트쿼리 주고 할 수 있는 겁니다.