[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