[React] 리액트 클릭한 위치에 이미지 배치하기
·
study/프론트엔드🔯
개요 프로젝트에서 클릭한 위치에 이미지를 배치하고, 새로고침을 해도 이미지가 고정되어야 하는 페이지가 있었다. 그런데 문제는 웹앱이다보니 기기가 달라지면 그 위치가 달라지는 문제가 있었다. 해결법 1. 현재 창의 X,Y 좌표를 구한다. getBoundingClientRect().x getBoundingClientRect().y 2. 브라우저에서 사용자에게 웹페이지가 보여지는 영역의 x,y 좌표를 구한다. clientX clientY 3. 2번에서 1번을 뺀 값을 이미지가 들어갈 컴포넌트의 높이, 너비로 나누어주고, 100을 곱한다. 매번 컴포넌트 높이, 너비가 달라지기 때문에 비율을 구한 것이다. ✳️컴포넌트의 높이, 너비 구하는 법 컴포넌트 속성에 ref = {componentRef}를 해주고, 아래 ..