redux에 React.RefObject 저장하기

발단

Navbar의 요소 하나하나에 그에 대응하는 컴포넌트를 연결해서 scrollIntoView를 사용해서 Y축 스크롤을 이동시키고 싶었다. 이를 위해 redux에 해당 컴포넌트의 ref를 저장하고 싶었다.

A non-serializable value was detected in the state, in the path: refSlice.skillRef. Value: <div class=​"sc-brKeYL boQhJn">​…​

하지만 위와 같은 에러가 출력되며 경고를 받았다. serializable(직렬화) 되지 않은 정보는 store에 저장할 수 없다니 무슨 뜻일까?

직렬화

대부분의 블로그들이 설명하고 있는 JAVA의 직렬화는 자바의 시스템 내부에서만 사용할 수 있는 데이터를 byte 단위로 변환하여 외부에서도 사용할 수 있게 변환하는 것이다. 이와 동일한 동작은 아니겠지만 이 문제에서의 직렬화도 JS나 html에서만 사용할 수 있는 정보를 외부에서 사용할 수 있게 변환하는 것이라 생각한다.

내가 redux에 state로 넘기려 했던 React.RefObject형태의 정보는 JS에서만 쓸 수 있는 비직렬화된 정보라 넘어가는데 이슈가 있었던 것 같다.

해결

해결법은 간단했다. 직렬화된 정보인 해당 컴포넌트의 시작 Y값(offsetTop)을 리덕스에 저장하고 이를 window.srollTo에 사용하는 것으로 마무리했다.

참고 문서

Redux Document - Usage Guide
우아한 기술 블로그 - 자바 직렬화, 그것이 알고 싶다.