강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của jaehyeonlim
jaehyeonlim

câu hỏi đã được viết

Bắt đầu với Next.js (feat. phát triển dịch vụ bản đồ)

Tải Bản đồ Naver với next/script

onLoad함수 (script태그의 onLoad X)

Đã giải quyết

Viết

·

396

·

Đã chỉnh sửa

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이 들어가는지 궁금합니다!

seonext.jsvercelcsrssgssr

Câu trả lời 1

1

vroomfan님의 프로필 이미지
vroomfan
Người chia sẻ kiến thức

안녕하세요. 질문 감사합니다.

  1. 이어지는 3-3~3-5 강의에서 MapSection.tsx의 onLoad 함수를 추가로 작성하게 됩니다. 깔끔한 코드를 위해 미리 prop을 분리해두었습니다ㅎㅎ

  2. 해당 코드가 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 예제'도 보시면 도움이 될 것 같습니다.
    image

감사합니다. :)

jaehyeonlim님의 프로필 이미지
jaehyeonlim
Người đặt câu hỏi

감사합니다!!!!!

Hình ảnh hồ sơ của jaehyeonlim
jaehyeonlim

câu hỏi đã được viết

Đặt câu hỏi