React에서 마커 커스텀하기

var defaultMarker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.3606904, 127.1061625),
    map: map,
    icon: {
        content: '<img src="'+ HOME_PATH +'/img/example/pin_default.png" alt="" ' +
                 'style="margin: 0px; padding: 0px; border: 0px solid transparent; display: block; max-width: none; max-height: none; ' +
                 '-webkit-user-select: none; position: absolute; width: 22px; height: 35px; left: 0px; top: 0px;">',
        size: new naver.maps.Size(22, 35),
        anchor: new naver.maps.Point(11, 35)
    }
});

네이버 지도api 예제코드.

... ?

저는 현재 네이버 지도api 를 활용하여 react로 지도 관련 웹을 개발 하고있고, 위치를 표시해주는 마커를 커스텀하기 위해 예제를 살펴보았습니다.
예제를 보았을때
icon에 content를 활용하여 커스텀 할 수 있는것을 파악하였고 인라인 스타일을 사용한 것 또한 알 수 있었습니다.
하지만 저는 react 를 사용시 styled-component 로 스타일을 적용하였는데 위 코드에서는 styled-component 를 활용하여 태그를 집어넣었을시에 에러가 발생하였고. 이렇게 되니 ' ' 로 감싸진 코드에서는 자동완성 기능도 쓸수없고 가독성도 떨어지니 답답하게 느껴졌습니다.

이를 해결하고자 생각하던중에 스타일 컴포넌트를 쓰면서 잊고있던 class 를 주고 외부 App.css 파일을 임포트해서 스타일을 적용해주는 방법이 생각났고 다행이도 생각대로 잘 적용 되었습니다.

import "./App.css";

marker = new naver.maps.Marker({
          map: map,
          position: latlng,
          icon: {
            content:
              '<img class="pulse" draggable="false" unselectable="on" >',
            anchor: new naver.maps.Point(11, 11),
          },
          

이렇게 하여 코드의 자동완성 기능도 사용할수 있게 되었고 가독성도 해결 되었습니다.

이렇게 하여 현재 문제는 잘 해결 되었지만 의문점도 생겼습니다.

추후 해결 해야할 점
1. 클래스명이 많아질경우의 문제점.
2. 스타일 컴포넌트를 사용할 수는 없는지.