리팩토링 : 카카오맵 연속클릭시 하얀지도뜨는 버그 해결

계속 지도를 클릭해대면 지도가 하얘진다.

클릭을 마구 하다보면 하얀지도가 떠버린다.

처음에는 계속 axios를 찾았다.

모든 axios에 로딩신호를 할당하고, setTimeout() 함수도 넣어보고 별별짓 다해봤지만 해결되지 않았다.

길을 잘못들었다는 생각이 들어 코드를 한줄한줄 자세히 바라보았다.

placeList... 이놈이 만약 초기화되었다면??? 그동안 useState, useRecoilState에 뒷통수를 많이 맞은 나는

이녀석을 보자마자 의심을 하지 않을 수 없었다.

좌: 문제의 반복문 ,                                                                         우: placelist의 초기값은 빈배열

console.log를 찍어보니 역시나 빈배열이었다.

초기화되는 짧은 순간에 온클릭이벤트가 발생한다면 반복문이 빈배열을 순회하게 되는 것이었다!

 

빈배열을 순회하게 되면서 마커에 할당할 좌표가 없고, 하얀지도가 렌더링되는 것이다.

위 코드처럼 로딩인디케이터의 조건을 recoil selector 말고도 placeList.length===0 일때를 추가해주니 클릭이

로딩인디케이터에 차단되어 더이상 버그가 발생하지 않았다.

 

클릭을 하면 안되는 상황에는 로딩인디케이터를 렌더링해서 사용자의 클릭을 막아버린다.

로딩인디케이터를 사용할때 비동기통신만 신경썼었는데, 상황에 따라 예상치못한 sideEffect 가 발생할 수 있다는 교훈을 얻게 되었다.

 

 

더불어 지도 옆에 관광지 카드들을 나열한 컴퍼넌트인 placeCards.js에서 계속 메모리누수 경고가 뜨는 버그도 자연스레 해결되었다.

useEffect의 cleanup함수를 다 설정해봐도 되질 않아서, 분명히 하얀지도뜨는 버그와 연관이 있다고 생각했는데 역시 맞았다.

 

지도에서 빈배열을 순회하면서 진행이 끊겨버렸지만 placeCards.js에서의 배열은 정리되지 않은 상태로 남아있어서 메모리 누수 경고가 뜨는 것이었다.

=>의존성배열 바꿔서 해결했음. 하지만 임시방편임 placeList로 인해 발생하는 메모리누수를 어떻게 해결해야할지 모르겠음

=>클린업함수에서 state를 초기화 시켰음. 우선 메모리누수가 발생하진 않는데 또 언제발생할지 모르겠다.. 하..

 

* 사진에도 로딩 추가해야겠다..