React - 네이버 맵 api 활용하기

React - 네이버 맵 api 활용하기

리액트로 웹앱을 개발할때 네이버 맵 api를 활용할 때가 있다. 그때 활용하는 방법을 알아보자.

• 처음에 public/index.html 파일에 아래와 같이 바로 넣어주었다.

• 그럴때는 아래와 같이, 오류가 난다. 
• cannot read property of 'style' 즉 naver maps 객체가 생성되지 않다고 나오는 것이다.

• 그이유는, 처음 리액트 메인페이지를 렌더링했을때 react가 마운트 되기전에 네이버 api 코드가 실행되서, mapdiv가 없는데 map을 찾아서 오류가 나고 있었던것이다. 왜냐면 나같은 경우는 첫 메인페이지에서는 네이버 map관련 div를 선언하지 않고, 길찾기 관련 컴포넌트에서만 naver map을 쓰고 있어서 길찾기 관련 컴포넌트에만 아래와 같이 mapDiv를 선언해주었기 때문이다.

• 그리고 아래 길찾기 관련 컴포넌트를 렌더링 햇을때 오류가 났던 이유는 mapDiv를 선언했지만, 마운트 된후에 naver api를 불러와야 하는데 그 부분이 빠져있어 컴포넌트가 마운트 되기전에 네이버 api 코드가 실행되서 mapDiv를 못찾고 있던것이다. 따라서 새로고침을 했을때는 마운트가 된 이후이므로, 정상적으로 나오고있었다.

즉, 오류가 나지 않으려면 위의 initmap 함수는 maps 모듈을 불러온 이후(naver api를 불러오기위해),  컴포넌트가 didMount 된 이후 (mapDiv를 찾아야 하므로 )두가지를 만족했을때 실행되어야 하는것이다.

 

이를 해결하기 위해, react-naver-maps npm을 설치하여, 아래와 같이 연결해주어 문제를 해결했다.

(주의할 점은 public/index.html 에 넣어주었던 naver api 불러주는 스크립트와, map 생성 스크립트를 없애야 하는것이다.)

| 마치며

따라서 이렇게, 특정 컴포넌트에서만 쓰는 스크립트는 따로 분리해서 적용시키는 패턴을 잘 활용해야겠다.( loadNavermapsScript 함수와 관련)