리액트에서 컴포넌트의 높이(height), 넓이(width) 구하기

useRef를 이용하자!

const Test = props => {

const anchorRef = useRef<HTMLButtonElement>(null);

console.log(anchorRef.current?.offsetWidth) // 컴포넌트의 width
console.log(anchorRef.current?.offsetHeight) // 컴포넌트의 height

return (
	<div ref={anchorRef}>hi!</div>
)}

 

주의

offsetWidth, offsetheight 값은 렌더가 완료된 컴포넌트에서 가져올 수 있다.
useRef로 가져온 dom이 렌더가 완료되기 전에는 undefined 상태일 수 있기에
반드시 옵셔널 체이닝 '?' 을 해주자!

 

덧붙여서

const Test = props => {

const anchorRef = useRef<HTMLButtonElement>(null);

console.log(anchorRef.current?.offsetWidth || 0) // 컴포넌트의 width
console.log(anchorRef.current?.offsetHeight || 0) // 컴포넌트의 height

return (
	<div ref={anchorRef}>hi!</div>
)}

타입 스크립트 등의 이슈로 undefined 값이 허용되지 않을때를 대비해서 
|| 연산자를 이용해 offsetWidth, offsetHeight 값이 undefined 일때는 0을 출력하도록 수정해봤다.

변수에 담을때 이런식으로 하면,,, 문제가 있을까,,
조금 더 고민해봐야겠다!