지하철 노선도 상대적 위치 찾기
내가 하려고 했던 div를 지도의 위치에 각각 생성을 해야하는데
그럴려면 상대적 위치가 필요하다.
구글링을 해본 결과 컴포넌트의 상대적 위치를 찾는 event가 있어서 오늘은
이 주제를 다뤄보겠다.
자신의 마우스의 위치라든가 scroll 의 위치 등을 알기 위해서는 event의 어떤것들이 있는지 알 필요가 있다.
일단 event가 어떤것이 뜨는지 궁금하니 console.log로 event를 찍어봤다.
const charterOnClick = (e) => {
console.log(e);
console.log(e.nativeEvent.offsetX);
console.log(e.nativeEvent.offsetY);
};
이렇게 div 에 onClick 으로 이벤트를 주었으니 _reactName 은 "onClick"이고 type="Click"으로 표출된다.
여기에서 우리가 눈 여겨 봐야 할것은
ClientX,ClientY//
pageX,pageY//
screenX,screenY
그리고 내가 사용했던 컴포넌트의 상대적 위치를 알 수 있는
nativeEvent.offsetX,offsetY 이다.
먼저?
ClientX,Y란 무엇일까?
클라이언트 영역 내의 가로,세로 좌표를 제공하는것이다. 여기서 클라이언트 영역은 현재 보이는 브라우저 화면이 기준이다.
clientX: 브라우저 페이지에서의 X좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정!
clientY: 브라우저 페이지에서의 Y좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정!
offsetX,offsetY란?
위 메서드는 이벤트 대상이 기준이 된다. 즉 상대적 위치 div내부에서 클릭한 위치를 찾을 때 쓰는거라 나에게 필요한 값이다. 왼쪽 모서리 좌표가 0이 되고 화면의 기준이 아닌 전체 문서를 기준으로 한다.
offsetX: 이벤트 대상 객체에서의 상대적 마우스x 좌표 위치를 반환한다.
offsetY: 이벤트 대상 객체에서의 상대적 마우스y 좌표 위치를 반환한다.
pageX,pageY란?
위 메서드는 전체문서를 기준으로 x,y좌표를 반환함.
pageX: 브라우저 페이지에서의 x 좌표 위치를 반환함.
pageY: 브라우저 페이지에서의 y 좌표 위치를 반환함.
screenX,screenY란 ?
위 메서드는 모니터 화면을 기준으로 좌표 제공하는데 여기서 중요한 점은 브라우저 화면이 아닌 자신의 모니터 화면 해상도 기준으로 측정함.
screenX: 전체 모니터 스크린에서의 x좌표 위치를 반환함.
screenY: 전체 모니터 스크린에서의 y좌표 위치를 반환함.
zoom이라든가 자동 스크롤 같은 위치 정보를 찾을 때 유용한 정보들이라 따로 정리해봤다!
아. 그리고 div를 상대적 위치값에다가 생성하고 onClick줘서 역까지 찍는건 성공했는데 컴포넌트 기준이다 보니 해상도가 바뀌니 div위치가 바뀌어버려서 무용지물 되었다. ㅠㅠ svg 오픈소스가 있어서 그걸로 재 도전을 해야하나 고민중이다. 일단
챌린징으로 보류해두고 로그인 기능을 손을 좀 봐야겠다.
로그인도 한번 다뤄봐야겠다. 내가 담당한 function이 아니라서 공부를 해야겠다고 생각했다.
