[TIL] 내일배움캠프 React 과정 2024.05.27

오늘의 한 일

• 알고리즘 특강
  • FixedArray 메서드 구현
• 챌린지 반
  • Memo 앱 코드 리팩토링

오늘의 문제 해결

Redux에서 new Date() 객체를 사용하는 방법

• Memo 웹에서 memo라는 객체 안에 날짜 정보를 속성으로 넣어줄 필요가 있었고 따라서 memo.date라는 속성에 new Date()라는 값을 할당하였다.
• 그런데 다음과 같은 에러가 발생하였다
  

원인

• Storage에서 저장할 수 있는 값
  • 문자열
  • 숫자
  • boolean
• 기본적으로 redux-toolkit은 redux-persist를 사용하는 데 redux-persist는 값의 저장을 위해 localStorage나 sessionStorage와 같은 Storage를 사용한다.
• 그런데 Storage는 기본적으로 객체 특히 new Date()와 같은 object로 선언한 객체는 저장할 수 가 없다.

해결방법 1: middleware 활용

• store의 기본 속성 중 하나인 middleWare의 serializableCheck 옵션을 false로 바꿔준다.

  import { configureStore } from "@reduxjs/toolkit";
  import memoStateReducer from "./reducers/memoState.reducer";
  
  const store = configureStore({
    reducer: {
      memoState: memoStateReducer,
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: false,
      }),
  });
  
  export default store;

• 그러나 redux-persist를 사용하게 되면 오류가 발생할 수 있다.

해결방법 2: Date.now 활용

• 현재 날짜가 필요하면 Date 객체 전체를 전달해 줄 필요가 없다.
• Date 객체의 현재 시간을 str로 반환하는 Date.now 메서드를 사용한다.

  const newMemo = {
         id: randomID,
         content: String(action.payload),
         date: Date.now(), // date: new Date(),
       };

오늘의 회고