💥 에러 발생 상황
모두모두 웹 앱을 react 환경에서 개발하면서, 카카오맵 API를 사용한 지도를 띄울 때
지도부분은 따로 HostMap.js라는 파일에 컴포넌트로 만들어둔 후 import해서 사용했음
그 후, 백엔드로 데이터를 보내기 위해 axios를 사용하는데 지도를 이용해서 구했던 위도/경도 정보를 받아와야 할 일이 생김. 그래서 따로 구분해놨던 지도 부분인 HostMap.js을 없애고, 이를 그대로 옮겨서 OpenMeetingPage.js에 합치려는 상황
그런데 지도를 만들 때 정상 작동했던 코드를 그대로 OpenMeetingPage.js에 넣었는데 다음과 같은 에러가 발생함
❓ 에러가 발생한 이유
지도를 생성할 div가 위치한 곳은 state의 상태에 따라 사라졌다가 나타나는 부분이었음
그리고 지도를 생성하는 코드는 HostMap.js에서 작성했던 대로 useEffect()에 적어 두었는데, useEffect함수는 OpenMeetingPage 컴포넌트가 렌더링 될 때마다 실행하는 함수
따라서 OpenMeetingPage가 렌더링 될 때에는 지도를 그릴 div가 존재하지 않을 수 있기 때문에 에러가 발생하는 것으로 추정됨. (useEffect에서 id가 host-map인것을 가져오려 요청했을 때, id가 host-map인게 없었던 것!) 따로 파일로 작성했을 때에는 지도를 나타낼 div만 그렸기 때문에 에러가 발생하지 않았었음
다른 곳에 지도를 그릴 부분을 꺼내 보니 제대로 작동하는 것 확인
✔ 해결 방법
이 문제를 해결하기 위해 useEffect()에서 그냥 바로 지도를 그리지 않고,
mapDrawer()라는 함수에 지도를 그리는 기능을 넣어둔 후 -> 지도를 담고 있는 부분이 state에 따라 생성되고 나서 -> 따로 만들어둔 지도 생성 함수 mapDrawer()가 실행되도록 작성함
따라서 바뀐 코드는 다음과 같음
useEffect(() => {
if (userInputScreen == 2) {
mapDrawer();
}
}, [userInputScreen])useEffect에서 userInputScreen state의 변경을 감지하고, 이 값이 2일 경우(지도가 있는 창이 오픈된 경우) mapDrawer()를 통해 지도를 그려줌으로써 해결!