리덕스의 상태를 유지하기위한 방법

로그인을 하고나서 토큰과 유저정보를 같이 Response에 담겨서 오게되는데 그걸 redux toolkit으로 담아서 홈화면에서 사용을 하려고 했는데 새로고침하면 리덕스에 저장된게 사라져서 홈화면에 그려주지를 못한다.

 

이유는 브라우저의 새로고침으로 인해 redux상태가 초기화 되기 때문이라고한다. 

 

이걸 해결하기 위해서 로컬, 세션, 쿠키를 이용하는 방법이 있다.

 

리덕스 상태를 유지하기 위해서는 쿠키, 로컬 스토리지, 세션 중에서 어떤 것을 선택할지는 상황과 요구사항에 따라 다를 수 있다. 각각의 방법에는 장단점이 있으므로, 아래의 내용을 고려하여 선택할 수 있다:

1. 쿠키: 쿠키는 클라이언트 측에 저장되는 작은 데이터 조각입니다. 주로 인증 토큰을 쿠키에 저장하여 사용한다. 쿠키는 브라우저가 서버에 요청을 보낼 때마다 자동으로 전송되므로 서버와 클라이언트 간의 통신에 용이하다. 하지만 쿠키는 보안에 취약할 수 있으며, 용량 제한이 있어 저장할 수 있는 데이터 크기가 제한적이다.
2. 로컬 스토리지: 로컬 스토리지는 브라우저에 데이터를 저장하는 데 사용된다. 쿠키보다 용량 제한이 크고, 클라이언트 측에서 직접 접근하여 데이터를 읽고 쓸 수 있다. 로컬 스토리지는 보안 측면에서 쿠키보다 안전하지만, 데이터가 노출되거나 조작될 수 있는 위험이 있다.
3. 세션: 세션은 서버 측에서 유지되는 상태이다. 클라이언트에 대한 고유한 세션 ID를 발급하고, 해당 세션 ID를 사용하여 서버에 저장된 세션 데이터에 접근한다. 세션은 서버에 저장되기 때문에 쿠키와 로컬 스토리지보다 안전한다. 하지만 세션은 서버 자원을 사용하므로 대규모 트래픽에서는 확장성에 제한이 있을 수 있다.

어떤 방법을 선택할지는 상황과 요구사항에 따라 다르다. 중요한 데이터를 저장하는 경우 보안 측면에서 로컬 스토리지나 세션을 선호할 수 있다. 또한, 애플리케이션의 규모, 성능, 확장성 요구사항 등을 고려하여 결정해야 한다.

 

내가 생각했을땐 로컬 스토리지를 이용하는게 좋을 것같다고 생각이 들었다.

 

// src/store.js

import { createStore } from 'redux';

const SAVE_STATE_ACTION = 'SAVE_STATE_ACTION';

// 리듀서 정의
function reducer(state, action) {
  // 리듀서 로직 작성
  // ...
}

// 리덕스 스토어 생성
const store = createStore(reducer);

// 로컬 스토리지에서 상태 불러오기
const savedState = localStorage.getItem('reduxState');
if (savedState) {
  store.dispatch({ type: SAVE_STATE_ACTION, payload: JSON.parse(savedState) });
}

// 상태 변경 시에 로컬 스토리지에 저장
store.subscribe(() => {
  const state = store.getState();
  localStorage.setItem('reduxState', JSON.stringify(state));
});

export default store;

// src/store.js

import { createStore } from 'redux';

const SAVE_STATE_ACTION = 'SAVE_STATE_ACTION';

// 리듀서 정의
function reducer(state, action) {
  // 리듀서 로직 작성
  // ...
}

// 리덕스 스토어 생성
const store = createStore(reducer);

// 로컬 스토리지에서 상태 불러오기
const savedState = localStorage.getItem('reduxState');
if (savedState) {
  store.dispatch({ type: SAVE_STATE_ACTION, payload: JSON.parse(savedState) });
}

// 상태 변경 시에 로컬 스토리지에 저장
store.subscribe(() => {
  const state = store.getState();
  localStorage.setItem('reduxState', JSON.stringify(state));
});

export default store;

 

아래는 리덕스 툴킷방법이다.

configureStore에서 저장된 상태 불러오기:

configureStore 함수의 preloadedState 매개변수를 사용하여 초기 상태를 설정한.

// src/store.js

import { configureStore } from '@reduxjs/toolkit';

const storeKey = 'reduxState';

// 리덕스 스토어 생성
const store = configureStore({
  reducer: rootReducer,
  preloadedState: loadStateFromLocalStorage(),
});

// 로컬 스토리지에서 상태 불러오기
function loadStateFromLocalStorage() {
  try {
    const serializedState = localStorage.getItem(storeKey);
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (error) {
    return undefined;
  }
}

export default store;

위 코드에서 loadStateFromLocalStorage 함수를 통해 로컬 스토리지에서 저장된 상태를 불러온다. 만약 로컬 스토리지에 저장된 상태가 없으면 undefined를 반환한다.

 

subscribe를 활용하여 상태 저장하기:

subscribe 메서드를 사용하여 상태 변경을 감지하고, 변경 시에 로컬 스토리지에 저장합니다.

// src/store.js

import { configureStore } from '@reduxjs/toolkit';

const storeKey = 'reduxState';

// 리덕스 스토어 생성
const store = configureStore({
  reducer: rootReducer,
  preloadedState: loadStateFromLocalStorage(),
});

// 로컬 스토리지에서 상태 불러오기
function loadStateFromLocalStorage() {
  try {
    const serializedState = localStorage.getItem(storeKey);
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (error) {
    return undefined;
  }
}

// 상태 변경 시에 로컬 스토리지에 저장
store.subscribe(() => {
  const state = store.getState();
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem(storeKey, serializedState);
  } catch (error) {
    console.error('Failed to save state to local storage:', error);
  }
});

export default store;

위 코드에서 subscribe 메서드를 사용하여 상태 변경을 감지하고, 변경 시에 로컬 스토리지에 저장한다. JSON.stringify를 사용하여 상태를 직렬화하고, localStorage.setItem을 사용하여 로컬 스토리지에 저장한다.

이렇게 하면 configureStore에서 저장된 상태를 초기 상태로 설정하고, 상태가 변경될 때마다 로컬 스토리지에 상태를 저장하여 유지할 수 있다.