강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

homie님의 프로필 이미지
homie

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

swr 사용해보기

redux와 react-query 설정

작성

·

1.1K

0

다른 질문 들도 보다가 궁금한 점이 생겨 여쭤봅니다.

프로젝트에서 내에서 상태관리를 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} />
    </QueryClientProvider>
  </Provider>,
  document.getElementById("root")
);

이런식으로 사용해서 reducer 함수 정의하고 각 컴포넌트에서 queryClient를 import해서 사용하는 건가요?

제로초님 강의 들으면서 react-query를 이제 막 공부하고 있는데 react-query가 내부적으로 contextAPI 사용한다고 알고있는데 redux랑 contextAPI를 같이 쓴다는게 정확히 감이 안잡히네요 

제가 잘못알고 있는 부분이나 공부해야할 키워드를 알려주시면 감사하겠습니다.

퀴즈

클라이언트사이드 렌더링(CSR)과 비교했을 때, 서버사이드 렌더링(SSR)의 주된 장점은 무엇일까요?

개발 복잡성 감소

초기 로딩 속도 개선 및 빠른 콘텐츠 표시

실시간 데이터 업데이트 용이

브라우저 호환성 문제 없음

답변 2

0

homie님의 프로필 이미지
homie
질문자

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

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

네 저런식으로 둘 다 각각 프로바이더 연결해서 내부 컴포넌트에서 훅으로 데이터작업 하시면 됩니다.

컨텍스트는 여러개 생성 가능해서 하나는 리덕스 주고 하나는 리액트쿼리 주고 할 수 있는 겁니다.

homie님의 프로필 이미지
homie

작성한 질문수

질문하기