[250206] 왜 생사람 잡냐?

오늘은 단순 헤프닝에 그치는 오류에 대해 이야기 해 볼까 합니다.

Converting circular structure to JSON 에러

에러 메세지

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLButtonElement'
    |     property '__reactFiber$lmy8mgviovp' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle
    at JSON.stringify (<anonymous>)
    at handleAddPoke (Context.jsx:14:44)
    at HTMLUnknownElement.callCallback2 (chunk-674SED4H.js?v=3041aa6a:3678:22)
    at Object.invokeGuardedCallbackDev (chunk-674SED4H.js?v=3041aa6a:3703:24)
    at invokeGuardedCallback (chunk-674SED4H.js?v=3041aa6a:3737:39)
    at invokeGuardedCallbackAndCatchFirstError (chunk-674SED4H.js?v=3041aa6a:3740:33)
    at executeDispatch (chunk-674SED4H.js?v=3041aa6a:7044:11)
    at processDispatchQueueItemsInOrder (chunk-674SED4H.js?v=3041aa6a:7064:15)
    at processDispatchQueue (chunk-674SED4H.js?v=3041aa6a:7073:13)
    at dispatchEventsForPlugins (chunk-674SED4H.js?v=3041aa6a:7081:11)

뭔 에러코드가 이렇게 길어... 하며 찾아보니 원인은 다음과 같았습니다.

• JSON.stringify를 통하여 정보를 저장하는데, 이때 순환 참조가 있는 객체를 직렬화하려고 시도했습니다.

• React의 컴포넌트 요소가 전달되어 JSON.stringify로 처리할 수 없습니다.

라는 문제로 인해 생기는 오류였습니다.

해당 오류는 포켓몬 카드를 DashBoard에 올리는 추가 버튼을 누르는 과정에서 일어나는 오류였고 그로 인해 추가하는 버튼 로직 자체에 문제가 있는 줄 알았습니다.

해결 방법

정말 간단한 헤프닝이였습니다.
prop-drilling으로 제작 했던 프로젝트를 Context API를 활용하여 상태를 관리하는 형태로 리팩토링 중에 발생했다는 것을 생각하여 handle함수의 인자를 잘못 설정해주어 발생한 일이였습니다.

저는 그것도 모르고 해당 에러코드에 적혀있는 Context.jsx 파일 안의 14번 째 코드만 계속 고치며 왜 안되지... 왜 안되지... 하고 있었습니다.

마무리

리팩토링이라는 작업은 코드의 큰 틀을 바꾸는 것이라 세부 로직 보단 큰 로직으로 바라보며 리팩토링을 하는 것이 좋겠다라고 생각하게 되는 헤프닝 오류?였습니다.