오늘 배운 것

getBoundingClientRect

버튼을 클릭 했을 때 그 위치에서 새로운 레이어를 띄우고 싶었다. 며칠 전에 알게 된 z-index를 응용해서 내가 원하는 위치에서 컴포넌트를 화면 위에 얹으면 될 것이라 생각했다. 하지만 버튼이 상황에 따라 x축의 좌표가(픽셀 단위의) 변하기 때문에 새로 띄우는 컴포넌트의 좌표를 고정해 놓으면 어색했다. 그래서 클릭한 상황에서의 버튼의 x축 좌표를 변수에 할당해서 만들어 스타일의 left에 그 변수를 넣어 주기로 했다. 그렇게 검색해서 알게 된 메소드가 getBoundingClientRect. 엘리먼트에 적용하는 메소드였다. react에서 엘리먼트 하나에 접근하기 위해서 useRef 를 사용했다.

<div className="period-select" 
     ref={componentRef} 
     onClick={()=>{
     	let x = componentRef.current?.getBoundingClientRect().x
        dispatch(selectPeriod(true, x))
     }}>

엘리먼트 하나의 x축 절대 좌표값을 구한후, store에 x축값을 전달!

e.currentTarget vs e.target

클릭했을 때 클릭한 엘리먼트의 textContent를 알고 싶었다. 전달 인자로 e를 받아서 e.target.textContent 를 입력하니 에러가 생겼다. 분명 해당하는 엘리먼트도 존재하고 e.target을 콜솔로그 찍어보면 target 안에 속성들이 존재하고 textContent도 있었다. target이 아닌 currentTarget을 사용해야 하였다. currentTarget과 target의 차이가 궁금해졌다. stackoverflow에 같은 질문이 있어서 읽어 봤다.

• target 은 이벤트를 트리거한 요소
• currentTarget 은 이벤트 리스너를 가지고 있는 요소

내가 클릭했던 엘리먼트는 이벤트를 발생시킨 것이 아니고 이벤트리스너를 가지고 있는 요소이기 때문에 currentTarget을 적용해야 하는 것으로 이해 해야겠다. 아직 명확하게 이해하지 못했다. 조금 더 알아봐야 겠다.