[TIL]

프로젝트를 하다가 처음 들어보는 단어들이 많아서 찾아보다가 알게된 것들을 정리해놓아야 겠다는 생각이 들었다.

 

import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";

const persistor = persistStore(store);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
    // ... 생략 ... 
    </PersistGate>
  </Provider>
);

 

 

 

웹에서 사용자의 행동에 따라 상태가 변하고, 이 상태는 주로 Redux 같은 상태 관리 라이브러리를 통해 관리된다.

이 리덕스를 사용할 때, 새로고침 버튼을 누르게 되거나 닫으면 메모리에 저장되어있던 상태가 모두 초기화 되는 것을 확인할 수 있다.

새로고침으로 인해 데이터가 모두 증발하게 되면 페이지가 제대로 렌더링이 되지 않거나 데이터를 가져오지 못해 에러가 발생할 수 있다.

이를 미연에 방지하고자 Redux persist를 활용하여 에러를 방지할 수 있다. 

 

즉, Redux persist는 리덕스에 저장된 데이터를 로컬 스토리지 또는 세션 스토리지에 저장하여 데이터를 유지시켜주는 패키지이다.

하지만 주의할 점은, 비밀번호/ 개인 정보 등은 로컬 스토리지에 저장하지 않도록 해야한다. 로컬스토리지는 보안에 취약하기 때문이다.

 

 

 

 

 

 

- persistStore :  Redux 스토어를 인자로 받아, 지속적으로 상태를 유지할 수 있도록 스토어를 생성하는 함수이다.

이 함수를 호출하면, 리턴값으로 persistor 객체를 받을 수 있다. 

 

- PersistGate : React 컴포넌트로, 자식 컴포넌트의 렌더링을 지연시킬 수 있다.

이로 인해, 불러온 상태를 바탕으로 자식 컴포넌트를 렌더링할 수 있다.

리덕스 스토어에 유지시키고자 하는 데이터들이 정상적으로 저장되고 불러올 수 있도록 UI의 렌더링을 지연시키는 역할을 하고, PersistGate로 루트 컴포넌트를 감싸서 사용한다.

 

- loading : UI 렌더링의 지연시간을 나타낸다. 

null 값으로 지정할 수 있으며, 단위는 ms로 loading={1000} 으로 설정한 경우, UI 렌더링이 약 1초간 지연된 후, 렌더링이 시작된다.

 

- persistor : persistStore 함수를 통해 생성된 객체로, persist 스토어에 대한 여러 작업을 수행할 수 있다.

예를 들어, persistor.pause(), persistor.purge() 등의 메소드를 이용해 상태의 지속을 일시 중지하거나, 저장된 상태를 제거할 수 있다. 

 

- key : storage에 저장할 때의 키값을 지정한다.

 

- storage : session, localStorage 중에서 저장할 스토리지를 지정한다. 

localStorage는 웹 브라우저를 닫아도 데이터가 유지되지만, sessionStorage는 브라우저 세션이 끝나면 데이터가 사라진다.

 

- persistReducer :  기존의 리듀서를 감싸서, 리듀서의 상태를 지속적으로 유지할 수 있도록 해주는 함수이다.

이 함수에는 설정 객체와 원래의 리듀서를 전달한다.