[React][유용한 라이브러리] react-use-measure

# react-use-measure

- 본 포스팅에서는 react-use-measure 라이브러리를 사용해서, component의 정보를 가져오는 방법을 소개합니다 

 

 

# Github Page

GitHub - pmndrs/react-use-measure: 🙌 Utility to measure view bounds

 

# 사용방법

- 언제나처럼 설치를 진행해줍니다

yarn add react-use-measure

 

- 측정하고 싶은 Element에 아래와 같이 구현해주고 bounds를 확인하면 됩니다

 

import useMeasure from 'react-use-measure'

function App() {
  const [ref, bounds] = useMeasure()

  // consider that knowing bounds is only possible *after* the view renders
  // so you'll get zero values on the first run and be informed later

  return <div ref={ref} />
}

 

- bounds에 포함되는 정보는 다음과 같습니다

 readonly x: number
  readonly y: number
  readonly width: number
  readonly height: number
  readonly top: number
  readonly right: number
  readonly bottom: number
  readonly left: number

 

---