노트

getBoundingClientRect

Element.getBoundingClientRect()

프런트엔드#browser#js · 연결된 개념 5개

쉽게 말하면

getBoundingClientRect는 요소가 지금 화면에서 어디에 어떤 크기로 그려져 있는지 재는 줄자예요. 툴팁을 버튼 바로 아래에 띄우거나 두 상자가 겹치는지 확인할 때 써요.

비유가 깨지는 곳 문서가 아니라 지금 보이는 화면 기준이라 스크롤하면 top이 바뀌고, transform이 반영된 크기를 줘요. 또 잴 때 레이아웃을 강제할 수 있어서 DOM을 바꾸며 반복해 부르면 느려져요.

요소가 지금 뷰포트(Viewport) 안 어디에 얼마만 한 크기로 그려져 있는지를 DOMRect(x, y, top, right, bottom, left, width, height)로 돌려주는 DOM(Document Object Model) API. 문서 기준이 아니라 현재 화면 기준이다.

const r = el.getBoundingClientRect()
r.top                     // 화면 위쪽에서의 거리 (스크롤하면 바뀜)
r.top + window.scrollY    // 문서 기준 위치
  • 스크롤을 내리면 top이 줄어든다. 대략 top = 문서상 위치 - 스크롤 위치
  • width·height는 소수점을 포함하고 transform이 반영된 실제 그려진 크기다. offsetWidth는 정수이고 transform 적용 전 레이아웃 크기다. transform: scale(2)인 100px 상자는 offsetWidth 100, getBoundingClientRect().width 200이다
  • 호출하면 미뤄 둔 스타일 변경을 반영하느라 레이아웃이 강제로 일어날 수 있다. DOM을 바꾸면서 반복해서 부르면 레이아웃 스래싱이 된다

쓰임

// 툴팁을 버튼 바로 아래에
const b = button.getBoundingClientRect()
tip.style.left = `${b.left}px`
tip.style.top = `${b.bottom + 8}px`
 
// 두 상자가 겹치는지(드래그 앤 드롭 충돌 검사)
const hit = a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top
  • "요소가 화면에 들어왔는지"는 스크롤 이벤트마다 이 값을 재는 대신 IntersectionObserver가 낫다. 브라우저가 레이아웃을 강제하지 않고 알려 준다
  • React에서 측정한 값으로 위치를 바로 고쳐야 한다면 페인트 전에 실행되는 useLayoutEffect에서 읽어야 깜빡임이 없다. 겹쳐 띄우는 UI는 포털과 함께 쓰는 경우가 많다
  • 큰 목록에서 어떤 항목이 보이는지 계산하는 가상 스크롤(Virtual Scrolling)도 같은 좌표 계산을 쓴다

출처: MDN — Element.getBoundingClientRect()

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 반응형 웹 디자인

    하나의 페이지가 화면 크기와 기기에 맞춰 레이아웃·이미지·글자 크기를 바꾸도록 만드는 접근. 미디어 쿼리(Media Query), 유연한 레이아웃(Flexible Layout), 반응형 미디어(Responsive Media)가 세 축이다.

  • content-visibility

    화면 밖에 있는 요소의 렌더링을 건너뛰어도 된다고 브라우저에 알려 주는 CSS 속성. auto를 주면 뷰포트에서 멀리 있는 요소의 레이아웃·페인트를 생략하므로, 긴 페이지의 첫 렌더링과 스크롤이 빨라진다.

  • React 엘리먼트와 JSX

    React 엘리먼트(React Element)는 "화면에 무엇을 그릴지"를 설명하는 불변의 평범한 JavaScript 객체다. JSX(JavaScript XML)는 이 객체를 만드는 문법이고, 컴파일하면 createElement(새 JSX 변환에서는 jsx()) 호출이 된다.

  • Activity와 숨겨진 라우트 보존

    Activity는 React 19.2의 컴포넌트로, UI를 언마운트하지 않고 display: none으로 숨기면서 state와 DOM(Document Object Model)을 보존한다. 숨기는 동안 Effect는 정리(cleanup)된다. 예전 이름은 Offscreen이다.

  • CSS 박스 모델

    브라우저는 모든 요소를 사각형 상자로 보고, 그 상자를 안쪽부터 콘텐츠(content) → 안쪽 여백(padding) → 테두리(border) → 바깥 여백(margin) 네 겹으로 계산한다. 레이아웃에서 요소가 차지하는 크기와 요소 사이 간격이 모두 이 네 겹에서 나온다.

보기 옵션