엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.

Next.js 시작하기(feat. 지도 서비스 개발)

Marker UI 그리기

해결된 질문

작성

270

선생님 안녕하세요. 좋은강의 너무 감사드립니다!

다름이 아니라 이번 강의에서

MapSection.tsx에서

const MapSection = () => {
  const { initializeMap } = useMap();
  const onLoadMap = (map: NaverMap) => {
    initializeMap(map);
  };

  return (
    <>
      <Map onLoad={onLoadMap} />  // 이부분
      <Markers />  // 이부분
    </>
  );
};

export default MapSection;

이런식으로 return값에

위에 Map 컴포넌트, 아래에 Markers컴포넌트가 왔잖아요.

그래서 저는 맵위에 마커들을 덮어씌우는(?)형식으로 나오게 될 줄 알았습니다. 그런데 결과를 보니,

스크린샷 2023-10-10 오후 3.09.34.png 이렇게 map div밑에 자식으로 들어가있더라구요. 어떻게 이렇게 되는지 설명해주시면 감사하겠습니다!!

seo next.js vercel csr ssg ssr

답변 1

박용주

지식공유자

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

Marker 컴포넌트가 return하는 부분을 보시면 return null; 이라고 되어있을 것입니다. 즉, 마커 아이콘은 react의 렌더링부에 의해 그려지는 것이 아닌, Marker.tsx에 있는

marker = new naver.maps.Marker({
  map: map,
  position: new naver.maps.LatLng(...coordinates),
  icon,
});

코드에 의해 그려집니다.
따라서 <Map>과 <Markers>가 겉으로는 병렬 구조로 보일 수 있지만, 실제로는 naver map API의 방식대로 작동하게 됩니다. Marker API 문서를 훑어보시면 조금 더 이해가 되실 것 같습니다. 관련 링크 첨부드립니다ㅎㅎ
(https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-marker-simple.example.html
https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Marker.html)

감사합니다 :)

google_user

질문자

아하 그러면

<Markers />  // 이부분

여기는 그냥 네이버 API를 실행하기 위한 부분으로 봐도 괜찮을까요?

UI에 직접적으로 뭘 그리거나 하지는 않구요.

너무 감사드립니다~ 선생님은 천재에요!!

박용주

지식공유자

넵넵! Markers도 단순히 Marker 컴포넌트 여러 개를 뿌려주는 컴포넌트로 이해하시면 됩니다ㅎㅎ

인프런 커뮤니티 질문&답변

엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.