index 파일

전체 코드

import React from "react";
import { createRoot } from "react-dom/client";

import { Provider } from "react-redux";

import { PersistGate } from "redux-persist/integration/react"; 

// Redux 스토어를 가져옴
// persistor 스토리지에 로그인 정보를 저장 하기 위해
import store, { persistor } from "./redux/store";

//App컴포넌트 연동
import App from "./App";

const container = document.getElementById("root")!;
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

학습

Provider : Redux 스토어를 React 애플리케이션의 모든 컴포넌트에 제공하기 위해 사용
PersistGate: 새로 고침되어도 상태가 유지/이전에 저장된 상태를 로드하여 Redux 스토어에 복원

• loading={null}: 로딩 화면을 사용하지 않고, Redux Persist가 초기화될 때까지 다른 컴포넌트를 렌더링하고 싶을 때 유용
• persistor={persistor} : Redux Persist에서 사용하는 지속성(persistor) 객체를 전달하는 데 사용