[React Redux] Redux 적용중 발생한 A non-serializable value was detected 오류
열심히 React 에 Redux 를 구축을 완료했는데 테스트를 해보는 과정에서 A non-serializable value was detected... 오류가 발생하였다. 이건 도대체 무엇인가.
위 오류를 해석해보면 바로 "직렬화 할수 없는 값을 발견했다." 라는 뜻이다.
직렬화란 무엇인가?
- 객체를 파일의 형태, 통신하기 쉬운 포맷(ex. JSON) 으로 변환하는 과정을 의미한다.
- 객채를 특정 포맷으로 직렬화 하던가 아니면 특정 포맷으로 직렬화된 데이터를 역직렬화하여 특정 객체로 변환 한다고 할때 사용되는 단어이다.
JavaScript 에서 직렬화 / 역직렬화
1.) 직렬화(Serialize)
- JSON.stringfy( JSON 형식의 객체 ex. {key1 : value1, key2 : value2 ...} )
- 객체 -> 문자열로 변환 하는것을 직렬화라고 한다.
- JSON 통신할때 객체를 문자열로 직렬화 하여 BE 로 보내준다.
2.) 역직렬화(Deserialize)
- JSON.parse( JSON 형식의 문자열 ex. "{'key1' : 'value1', 'key2':'value2'...}" )
- 문자열 -> 객체로 반환 하는걸을 역직렬화라고 한다.
- JSON 통신으로 BE 로부터 받은 문자열을 객체로 역직렬화 하여 사용한다.
직렬화 가능 / 불가능 타입
3.) Plain Type
- JSON 직렬화 가능 : Boolean, Number, String, Array, Object and undefined
4.) Iterable Type
- JSON 직렬화 가능 : Array, String
- JSON 직렬화 불가능 : Set, Map
이렇게 직렬화에 대해서 알아보았다.
즉 위 오류에 대해 정리를 해보자면 직렬화 불가능 타입(Map, Set)에서 JSON 타입(문자열)으로 직렬화 시도를 하는 과정에서 직렬화 시킬 수 없다는 오류가 발생한 것이다.
위 문제를 해결하기 위해선 문제가 되는 값의 타입을 직렬화 가능한 타입으로 가공해준 후 직렬화를 시도하면 해결 가능하다.