# Element.getBoundingClientRect()

getBoundingClientRect() 메서드는 DOMRect요소의 크기와 브라우저 뷰포트에 상대적인 위치에 대한 정보를 제공 하는 객체를 반환합니다.

getBoundingClientRect는 화면에서 잡은 dom을 어디에 위치한 지 알기 위해 사용합니다.

# 구문

getBoundingClientRect의 구문은 다음과 같습니다.

domRect = element.getBoundingClientRect();

# 설명

getBoundingClientRect의 return 값은 해당 dom의 width, height, left, top, right, bottom, x, y를 알려주며 widthheight는 뷰포트의 왼쪽 상단을 기준으로 합니다.

# 예시

유저가 스크롤을 했을 때, element의 위치에 따라 element를 보여주거나 안보여주는 예시입니다. 이 예시는 react에 기반합니다.

useRef를 이용하여 dom을 잡고 해당 dom에 getBoundingClientRect 메소드를 실행하여 top 위치를 감지합니다.
top 위치에 따라서 hideElement를 true 또는 false로 변경합니다.

import { useState, useEffect, useRef } from "react";

function GetBoundingClientReactExample() {
  const [hideElement, setHideElement] = useState(false);
  const scrollRef = useRef(null);

  useEffect(() => {
    if (!scrollRef.current) return;
    window.addEventListener("scroll", yScrollEvent);
    return () => {
      window.removeEventListener("scroll", yScrollEvent);
    };
  }, [scrollRef.current]);

  const yScrollEvent = () => {
    const scroll = scrollRef.current.getBoundingClientRect();
    console.log(scroll);
    setHideElement(scroll.top <= -100);
  };

  return (
    <div style={{ height: "300vh", background: "#eee" }} ref={scrollRef}>
      {!hideElement && (
        <div style={{ position: "fixed", background: "#fff" }}>
          <span>스크롤을 일정 수치만큼 내리면 이 영역은 사라집니다!</span>
        </div>
      )}
    </div>
  );
}

위 예시는 top만 사용하였으나 아래 scroll 변수에 console을 출력해보면 다른 값들도 활용 가능합니다.

console.log(scroll);

DOMRect {
  bottom: 1931
  height: 1920
  left: 0
  right: 360
  top: 11
  width: 360
  x: 0
  y: 11
}
#JS #react
노경환
이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄
최근변경일: 5/14/2022, 8:52:31 AM