React 새로고침 데이터 저장

리액트 작업 중 회원가입 페이지에서 새로고침했을때 기존에 input 태그에 입력했던 정보들이 전부 없어져버렸다. 원래는 기존 데이터를 가지고 있을 줄 알았으나, 그게 아니었다. 전부 입력했던 데이터들이 그대로 사라져버린 것이다. 

setState 안에 넣어봐도 깊은 복사를 해보아도 휘발성으로 사라져 버렸다.

 

왜그러지 ??

그래서 방법을 찾아보았는데 React-Redux Persistance 라는 것을 알게 됐다.

persistance .. 단어 부터 영구적이다

 

 

---

그렇다면 왜 React-Redux 가 필요한가!

 

 

 

Redux 는 React 에서 사용하는 api 기술관리 중 하나이다.

처음에는 ContextApi 로 전역관리를 하면서 api 도 같이 작업하고 있었다. 사실 이 Context Api 로도 큰 불편함은 느끼지 못했다. 그래서

Redux 도 나중에 해야겠다 생각했는데 기술 공부 측면에서 도입하게 되었다.

 

초기 설정은 복잡하고 오래 걸리지만 나중에 Context Api 처럼 쉽게 사용할 수 있고 타입관리도 되며 Redux 를 지원해주는 라이브러리들이 다양해서 사용하기 편하다고 느낄때가 올것이다. ㅎㅎㅎ 

Redux-Persistance 를 사용하면 store 를 사용할 수 있는데, 이는  전역적으로 메모리를 저장시켜주는 기능을 하는 것 같다. 그래서 새로고침해도 데이터가 남아 있을 수 있게 휘발성을 잡아주는 역할을 하는 코어 역할인 듯 하다. 

localstorage / sessionstorage 에 데이터를 저장해서 휘발성을 잡아주는 역할을 한다.

 

import React, { FC } from "react";
import { Provider } from "react-redux";
import {
  Navigate,
  Route,
  Routes,
  useNavigate,
  useParams,
} from "react-router-dom";
import { PersistGate } from "redux-persist/integration/react";
import { store, storeOfPersisted } from "./util/Reducers";
import ModalMsg from "./modal/ModalMsg";
import  from "";
import "";
import UpdateInfo from "";

const App: FC = () => {
  const navi = useNavigate();
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={storeOfPersisted}>
        <Routes>
          <Route path="/" element={<BadmintonSignIn navi={navi} />} />
          <Route path="/" element={<UpdateInfo />} />
        </Routes>
        <ModalMsg navi={navi} />
      </PersistGate>
    </Provider>
  );
};
export default App;

 

우선 위와 같은 코드는 리액트 리덕스를 설정하는 작업 중 하나이다. 우선 위와같이 설정해서 전역으로 해당되도록 맨 바깥쪽에 Provider 를 넣어서 store 를 연결해준다. 

 

 

import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";
import modalMsgModule from "../modules/ModalMsgModule";
import persistReducer from "redux-persist/es/persistReducer";
import { thunk } from "redux-thunk";
import storage from "redux-persist/lib/storage";
import { persistStore } from "redux-persist";

interface RootState {
  modalMsgModule: any;
}

const rootReducer = combineReducers<RootState>({
  modalMsgModule,
});

const persistConfig = {
  key: "root",
  storage,
  whiteList: ["myInfoModule", "timerModule"],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const loggerMiddleWare = (store: any) => (next: any) => (action: any) => {
  console.log("첫번재 미들웨어");
  console.log("store", store);
  console.log("action", action);
  next(action);
};

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false }).concat(
      thunk,
      loggerMiddleWare
    ),
  devTools: true,
});

const storeOfPersisted = persistStore(store);
export { store, storeOfPersisted };

 

그리고 Reducer.ts 를 파일을 만들어 위와같이 설정해준다. 우선 store 에는 미들웨어라는 부분이 있는데 이는 데이터 통신의 중간지점을 인터셉터해서 해당 원하는 기능을 넣어주는 역할을 한다. 예를 들면 JWT 토큰 인증같은 방식이 그 예이다. 

 

 

---

🔥 Redux Middleware란?

• 액션이 리듀서에 도달하기 전에 가로채서 추가적인 작업을 수행
• 비동기 로직(예: API 요청), 로깅, 액션 변환 등을 처리할 수 있음
• Redux의 dispatch 함수를 확장하여 동작

---

🔹 Middleware가 필요한 이유

Redux는 기본적으로 순수 함수(pure function) 기반의 동기적인 상태 관리 시스템이야.
하지만 비동기 작업(예: API 요청, 타이머 등) 을 처리하려면 Middleware가 필요해.

📌 예제: Redux에서 직접 비동기 요청이 불가능한 경우

function fetchData() {
  return dispatch => {
    fetch("https://api.example.com/data")
      .then(response => response.json())
      .then(data => dispatch({ type: "SET_DATA", payload: data }));
  };
}

 

이 코드는 기본 Redux에서는 작동하지 않아! dispatch가 일반 객체만 받을 수 있기 때문이야.
이를 해결하려면 Redux Thunk 같은 Middleware가 필요해.

 

 

🔹 Redux Middleware 종류

Middleware는 다양하게 사용할 수 있어. 대표적인 몇 가지를 소개할게.

1️⃣ Redux Thunk

• 가장 많이 사용되는 Middleware
• 액션 생성자에서 함수를 반환할 수 있도록 함
• API 요청 같은 비동기 작업을 수행할 때 사용됨

📌 예제: Redux Thunk 사용하기 !

 

const fetchUser = () => {
  return (dispatch) => {
    dispatch({ type: "FETCH_USER_REQUEST" });
    fetch("https://jsonplaceholder.typicode.com/users/1")
      .then(response => response.json())
      .then(user => dispatch({ type: "FETCH_USER_SUCCESS", payload: user }))
      .catch(error => dispatch({ type: "FETCH_USER_FAILURE", error }));
  };
};

 

3️⃣ Redux Logger

• 액션이 디스패치될 때마다 콘솔에 로그를 출력하여 디버깅을 쉽게 만듦
• 상태(State)의 변화를 쉽게 확인 가능

import { createLogger } from "redux-logger";

const logger = createLogger({
  collapsed: true,
  diff: true,
});

const store = createStore(rootReducer, applyMiddleware(logger));

 

 

이렇게 있어.

이렇게 처음 설정한다면 새로고침할때 데이터는 사라지지 않는다.