강의

멘토링

로드맵

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

·

423

·

Đã 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

Quiz

60% người trả lời sai. Hãy thử ngay!

Next.js에서 네이버 지도와 같은 외부 스크립트를 비동기적으로 효율적으로 로드하기 위해 주로 사용된 컴포넌트는 무엇인가요?

next/head

next/dynamic

next/script

next/image

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