[React.js] 실시간으로 특정 요소의 길이값 가져오기

실시간으로 특정 요소의 길이값 가져오기

들어가며

• 리액트애서 실시간으로 특정 요소의 길이값을 가져오는 방법을 알아보자.

 

방법

• 우선 useRef를 이용하여 실시간으로 길이값을 가져올 요소를 지정해준다.

			
			
			
		
import {useRef} from 'react';
 
// ...
 
const horiRef = useRef(null);
 
// ...
 
return (
    <S.Container ref={horiRef}>
        {/* ... */}
    </S.Container>
);

 

• 다음과 같이 useEffect와 ResizeObserver를 이용하여 해당 요소의 사이즈값을 실시간으로 가져올 수 있다.

			
			
			
		
import { useEffect } from 'react';
 
useEffect(() => {
    const resizeObserver = new ResizeObserver((entries) => {
        for (let entry of entries) {
            if (entry.contentBoxSize) {
                const width = entry.contentBoxSize[0]?.inlineSize;
                setItemContainerSize(width);
            } else {
                const width = entry.contentRect.width;
                setItemContainerSize(width);
            }
        }
    });
 
    const containerElement = horiRef.current;
    if (containerElement) {
        resizeObserver.observe(containerElement);
    }
 
    return () => {
        resizeObserver.disconnect();
    };
}, [horiRef]);

 

 

Reference

ResizeObserver - Web APIs | MDN