-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
onLoad함수 (script태그의 onLoad X)
23.10.10 12:27 작성 23.10.10 12:31 수정 조회수 202
1
Map.tsx에서
//Map.tsx
if (onLoad) {
onLoad(map);
}
이 구문은 왜 쓰인걸까요??
MapSection.tsx 에서 Map을 부르는 부분을 봐도
// MapSection.tsx
import Map from "./Map";
const MapSection = () => {
return (
<Map
onLoad={() => {
console.log("load!");
}}
/>
);
};
export default MapSection;
별다른 기능을 하는 것 같지는 않아서요.
onLoad를 정의하고 있는 Map.tsx의 Props에서도
type Props = {
mapId?: string;
initialCenter?: Coordinates;
initialZoom?: number;
onLoad?: (map: NaverMap) => void;
};
변수로 NaverMap을 받기만 하고 별다른 기능은 하는 것 같지가 않은데,
혹시 onLoad가 어떤 기능을 하고있는지 알려주실 수 있을까요??
++ 추가로,
const map = new window.naver.maps.Map(mapId, mapOptions);
이렇게 했을 때, 어떻게
<div id={mapId} style={{ width: "100%", height: "100%" }} />
이 태그에 Map이 들어가는지 궁금합니다!
답변을 작성해보세요.
1
박용주
지식공유자2023.10.10
안녕하세요. 질문 감사합니다.
이어지는 3-3~3-5 강의에서 MapSection.tsx의
onLoad
함수를 추가로 작성하게 됩니다. 깔끔한 코드를 위해 미리 prop을 분리해두었습니다ㅎㅎ해당 코드가 naver map API에서 지정한 문법이기 때문입니다. naver map 객체를 생성할 때
naver.maps.Map
클래스를 사용하고, 첫번째 인자로지도를 삽입할 HTML 요소 혹은 id
를 받습니다. 이해를 위해 해당 API 링크 첨부드립니다! (https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Map.html)+해당 강의의 설명란에 있는 '네이버 script load 예제'도 보시면 도움이 될 것 같습니다.
감사합니다. :)
답변 1