엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.
선생님 안녕하세요. 좋은강의 너무 감사드립니다!
다름이 아니라 이번 강의에서
MapSection.tsx에서
const MapSection = () => {
const { initializeMap } = useMap();
const onLoadMap = (map: NaverMap) => {
initializeMap(map);
};
return (
<>
<Map onLoad={onLoadMap} /> // 이부분
<Markers /> // 이부분
</>
);
};
export default MapSection;
이런식으로 return값에
위에 Map 컴포넌트, 아래에 Markers컴포넌트가 왔잖아요.
그래서 저는 맵위에 마커들을 덮어씌우는(?)형식으로 나오게 될 줄 알았습니다. 그런데 결과를 보니,
이렇게 map div밑에 자식으로 들어가있더라구요. 어떻게 이렇게 되는지 설명해주시면 감사하겠습니다!!
답변 1
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)
감사합니다 :)
1
아하 그러면
<Markers /> // 이부분여기는 그냥 네이버 API를 실행하기 위한 부분으로 봐도 괜찮을까요?
UI에 직접적으로 뭘 그리거나 하지는 않구요.
너무 감사드립니다~ 선생님은 천재에요!!
API 라우터를 사용해야 하는 경우에 대해
1
148
1
키보드 어떤 거 사용하시나요
1
350
1
next.js 멀티플 런타임 관련해서 질문 올립니다..
1
358
2
아주 기초적인 질문입니다.
1
321
1
서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?
1
1168
2
수업을 듣다가 SSR에 관하여..
1
551
2
interface 와 type
1
375
1
onLoad함수 (script태그의 onLoad X)
1
425
1
dynamic에 대한 질문
1
447
1
SSR vs SSG
1
476
2
NoSSR 관련한 질문입니다:)
1
375
1
a tag 질문 !
1
327
2
8분 20초 배포 관련
1
324
2
안녕하세요! 구글 서치 콘솔에 등록하는 도중 다음 오류가 뜹니다
0
2673
2
emotion styles 파일이 빌드시 경고로 뜹니다.
1
438
1
naver map 이 출력되지 않습니다.
1
481
1
페이지에 site맵 존재시 next Link는 csr 처럼 싹가져오게 되나요?
1
263
2
Failed to load resource: the server responded with a status of 404 ()
1
1033
2
VSCode 익스텐션 궁금합니다.
1
354
1
상태관리 질문 있습니다!
1
447
1
swr에 대한 질문입니다. (용어 관련)
1
372
1
swr 질문입니다!
1
336
1
안녕하세요. span 태그의 부모에 display: flex 를 적용하는데 왜 적용되는지 아무리 생각해도 이해가 되지 않아 질문드립니다.
1
678
2
naver로고 important 값 주는 이유
1
366
2