인프런 커뮤니티 질문&답변

Ai 인턴의 말과 같이 Redux persist을 사용할때 나오는 직렬화 에러입니다.

간단히 말해 redux가 읽는 값을 직렬 형태로 놓으라는 말인데요, 사실 이런 개념으로 코딩테스트를 보는게 아니라면 굳이 자세히 알 필요는 없다고 생각합니다.

아래는 strore 변수 코드입니다.

configureStore의 middleware 속성을 넣은 후 seializableCheck이라는 속성을 false로 두어 직렬화 검사를 중지하면 됩니다. (성능에는 문제 없습니다.)

물론 값을 직렬화해서 넣는 것을 권장하고 있긴 하지만, 어차피 redux persist는 이런 간단한 예제에서 쓰이는 것으로 배운 것이고(그래서 직렬화 값을 넣고 안넣고 차이가 없습니다.), 나중에 mmkv만을 사용해서 코인앱을 구성하기 때문에 아래의 코드로 바꿔주면 에러가 없어지는 것을 확인할 수 있습니다.

export const store = configureStore({
  reducer: {counter: persistedReducer},
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

안녕하세요, 인프런 AI 인턴입니다. 김라영님.

발생한 에러는 Redux Toolkit을 사용할 때 흔히 발생할 수 있는 “non-serializable value” 에러입니다. 이는 Redux의 상태나 action 객체에 함수와 같은 직렬화할 수 없는 값이 포함되었을 때 발생할 수 있습니다. Redux는 상태 관리 라이브러리로, 상태를 직렬화 가능한 형태로 유지하려고 합니다. 그렇기 때문에, 상태나 action에 직렬화할 수 없는 값이 포함되면 이러한 경고 메시지가 표시될 수 있습니다.

에러의 원인 및 해결 방법

1. 직렬화 여부 확인:

   • 상태나 action 객체에 포함된 값이 직렬화될 수 있는 타입인지 확인해 보셔야 합니다. 일반적으로 JSON 형태로 직렬화할 수 있는 값들은 문제가 없습니다. 하지만, 함수, DOM요소, 특수 객체 등이 포함되면 위와 같은 에러가 발생합니다.
     

2. Redux Toolkit에서의 설정:

   • configureStore를 사용할 때, serializableCheck 옵션을 끌 수 있습니다. 다만, 이는 문제가 될 수 있는 부분을 미연에 방지할 수 없게 하므로 최후의 수단으로 사용하는 것이 좋습니다.
     

   import { configureStore } from '@reduxjs/toolkit';
   
   const store = configureStore({
     reducer: rootReducer,
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({
         serializableCheck: false,
       }),
   });

3. 함수가 포함된 경우 관련 코드 수정:
   
   • 객체나 상태에 직접 함수를 할당한 경우, 상태나 action에 포함하지 않도록 구조를 변경해야 합니다. 상태는 순수한 데이터 형태로 관리되도록 신경 쓰셔야 합니다.
     

관련 문제 토론

위와 유사한 문제가 토론된 내용들을 참고할 수 있습니다:

1. expo로 설치해도 되나요?
   
   • 내용 요약: 직렬화 문제를 포함한 다양한 설정 이슈들이 다뤄집니다.
     

김라영님의 문제 해결에 도움이 되길 바라며, 추가적인 질문이 있으시면 언제든 질문해 주시기 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.