[react] 제한된 영역을 클릭했을 때 좌표값을 구하는 방법 (feat. useRef, offsetX, offsetY)

Prologue

이미지를 업로드 하고 난 후, 클릭을 통해 해당 위치에 (+) 아이콘을 만들려고 했다. (마치 지도에서 핑을 찍듯!)
그러려면 일단 해당 사진에서 좌표를 구하는 일이 먼저라고 생각했기에, 좌표를 구하는 방법을 찾아봤다. 생각보다 금방 나오던데?

What?

우리가 사용할 것은 useRef()와 offsetX, offsetY 이다!
offsetX와 offsetY는 이벤트 대상 객체에서의 상대적 좌표값을 반환해주는 내장 객체이다.

이 값은 offset 뿐만이 아니라 client, page, screen 또한 존재하는데,
상세한 내용은 http://megaton111.cafe24.com/2016/11/29/clientx-offsetx-pagex-screenx%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90/ 를 참조하면 좋을 것 같다!

How?

간단하다. X좌표와 Y좌표를 저장할 객체 state와, 그 좌표쌍을 저장할 배열 state를 준비하면 된다.
그 후, onClick 이벤트가 일어날 대상에 useRef()를 심어주면 끝!

사용된 hooks와 function들

const [onClickCoordinate, setOnClickCoordinate] = useState({
  coordinateX: '',
  coordinateY: '',
});
const [coordinatesList, setCoordinatesList] = useState([]);

const imageOverlay = e => {
  setOnClickCoordinate(prev => ({
    ...prev,
    coordinateX:
      ((e.nativeEvent.offsetX - 12) / photoOverlay.current.offsetWidth) * 100,
    coordinateY:
      ((e.nativeEvent.offsetY - 12) / photoOverlay.current.offsetHeight) *
      100,
  }));
};


console.log(coordinatesList)

HTML 코드

<img
  src={imageInfo.previewURL}
  alt="previewImage"
  ref={imageOverlay}
  onClick={imageOverlayOnClick}
/>

위 코드는 이미지 태그 위에서 일어나는 onClick 이벤트에서 좌표값을 저장한 후 console.log() 를 찍는 코드이다!