React에서 CustomOverlay를 설정하려고 하면 CORS 에러가 발생합니다

지도/로컬 API
#1

안녕하세요.
리액트에서 아래과 같은 코드로 지도 서비스를 제작하고 있습니다.

const Map = (props: Props) => {
	const {positions} = props;
	
	if (window.kakao) {
		// 지도 설정
		const mapContainer = document.getElementById('Map');
		const mapOption = {
			...
		};
		
		// 지도 객체
		map = new kakao.maps.Map(mapContainer, mapOption);
		
                 // 오버레이 생성
		positions.map((items) => {
			const overlay = new kakao.maps.CustomOverlay({
				content: `<div>테스트</div>`,
				map,
				position: marker.getPosition()
			})
		});
	}
	
	return <div id="Map" className={cx('Map')}/>;
};

여기서 overlay.content를 string 타입의 “<div>테스트</div>” 이 아닌, object 타입의 <div>테스트</div> 으로 변경하게 된다면

Error: A cross-origin error was thrown.
React doesn't have access to the actual error object in development.
See https://fb.me/react-crossorigin-error for more information.

위와 같은 오류가 발생하며 CORS 에러가 발생합니다.

코드를 빌드하는 과정에서 발생한 문제인지, 카카오 맵 API의 문제인지 확인해주시면 정말 감사할 것 같습니다 :smile:

#2

content에는 String 혹은 HTMLElement를 넣을 수 있습니다.
일단 JSX 문법으로 작성된 Element 같이 보이는 <div>테스트</div> 오브젝트는
컴파일 단계에서 React의 컴포넌트 객체로 변경될 것이므로
DOM Element가 아닙니다.
해당 객체는 API에서 처리할 수 있는 값이 아니므로 부작용이 일어납니다.
일단 에러 메세지가 무엇때문에 발생했는지 무시하더라도
질문의 코드는 제대로 동작하지 않을 겁니다.

크로스 오리진 에러가 왜 발생하는지는
저도 윗 코드만 보고는 감이 오지 않습니다.
development 환경에서 JSX를 실시간 컴파일 하는 과정(watch -> HMR)에서 발생하는
태그 인젝션이 문제를 일으킬 확률이 있어 보입니다.
근거도 불충분하고 조건도 모르는, 어디까지나 소설 수준의 추측이지만…

정확한 원인을 말씀드리기는 어렵네요.

리액트 커스텀 오버레이 컴포넌트화
카카오맵 인포윈도우에 리액트 컴포넌트 삽입방법 문의
Dataset에 이미지주소를 넣어 여러개의 마커 처리하는 방법
#3

답변 감사드립니다.

JSX Element는 Object로 만들어져 있었고, 혹시 몰라 overlay.content를 {foo : “bar”} 형식으로 작성하니 동일한 오류가 발생하는 것을 확인하게 되었습니다.

doji님 말씀대로, Obejct 객체는 API에서 처리할 수 있는 값이 아니기에 API에서 오류가 리턴됨 => 오류를 인식하지 못한 React가 CORS 에러를 일으킴 으로 추정되고 있습니다.

다른 방법으로 string 타입으로 객체를 변환시키니 언제 그랬냐는 듯이 정상적으로 작동하고 있네요. :sweat_smile:

행복한 하루 보내세요. 감사합니다!

1개의 좋아요