[프로젝트] todo service ver.1 - redux-persist refactoring 회고

arrrrrr·2023년 4월 3일

React 공부중 🎽

목록 보기

15/16

리팩토링 이유

CRUD의 R이 서버 데이터를 읽어오는 것임을 알고 부랴부랴 서버를 덧붙였다.
처음에는 json-server를 이용하여 server를 열고 요즘 핫하다는 react-query로 통신을 하려고했는데, 생각해보니 내 todo는 user분리가 되지않아 하나의 서버에서 데이터를 관리하면 모두의 todo가 되는 문제가 있었다.
그래서 생각한 방법은 각자의 localstorage에 데이터를 저장하는 것이었고, 그 방법으로 redux-persist를 선택했다.

TIL

📆 4/2(일)

react-persist 개념을 찾아보고 내 코드에 적용을 시켰다.

🔫 아하! 하고 배운내용

어느시점에서 store의 데이터를 localstorage에 저장하는지가 너 - 무 궁금했는데 아래와 같다고 한다.
react-persist의 데이터 저장 로직
1️⃣ persistStore가 호출되는 시점에 상태가 로컬스토리지에 저장된다.(store.js)
2️⃣ persistor={persistor} 를 <App> 상단에 배치하여 앱 렌더 이전에 저장된 상태를 스토어로 가져온다. (index.js)
즉, persistor가 저장된 상태(⇒ initialsate or localstorage)를 가져와 스토어에 복원해준다. 이로인해 redux store와 localstorage의 데이터가 항상 일치하게 된다.

📆 4/3(월)

initialdata로 data 상태를 리셋했던 액션을 수정했다. localstorage의 데이터로 리셋되도록 했다.

여기가 시간을 가장 많이 허비 했던 부분인데, 분명 새로고침을 해도 브라우저 상에서 데이터는 유지되는데 필터링만 걸고나면 날라가서 로컬스토리지 연결이 잘못된줄 알았다.
디버깅을 통해 액션에서 initialdata로 필터 리셋을 적용한 부분이 문제임을 찾았고 뒷목을 잡으며 액션을 수정했다 🫠

배운 내용

핵심 로직 & 주요 함수

persistConfig 상태를 지속적으로 스토리지에 저장하는 방법을 담은 객체이다.
- key 속성은 저장된 데이터를 식별하는데 이용
- storage 속성은 데이터를 저장하는 데 사용되는 스토리지 객체를 지정함(기본값은 localstorage)
- 이후 persistReducer 함수에 사용한다.

persistReducer함수를 사용하여 persistConfig 객체와 reducer를 래핑하여 하나의 리듀서로 만든다.
- 이후에 하나의 store에 하나의 reducer로 등록한다.

configureStore 함수는 store를 만들어준다.
persistStore함수는 store를 래핑 한다.
- 상태를 지속적으로 스토리지에 저장하는 역할

래핑한 store를 이용하여 애플리케이션의 진입점에서 Redux 상태를 localstorage의 데이터와 동기화 시킨다.

persistor 가 그 역할을 한다.

root엘리먼트가 렌더링되는 시점 이전에 상태가 로컬 스토리지에 유지된다.

import { store, persistor } from "./store/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
          <App />
      </PersistGate>
  </Provider>
);