useRef 변화 감지

프로젝트 진행 중 useRef의 변화가 한 박자 늦게 변화가 감지되어 실시간으로 변화가 일어나지 않아 useRef를 실시간으로 확인할 수 있는 방법을 찾아보았다.

  useEffect(async () => {
    try {
      const resizeObserver = new ResizeObserver(() => {
        setReRander(cephImg.current && cephImg.current.offsetWidth);
      });
      resizeObserver.observe(cephImg.current);
        
      return () => {
        if (cephImg && cephImg.current && cephImg.current.offsetWidth) {
          resizeObserver.unobserve(cephImg.current);
        }
      };
    } catch (error) {
      console.log(error);
    }
  }, [cephImg.current]);

observe()인터페이스 의 메서드는 지정된 ResizeObserver또는 Element를 관찰하기 시작합니다

즉, 설정한 해당 Element의 크기 변화를 관찰하는 것.
해당 element의 크기가 변화가 생기는 순간을 캐치.

통사론

observe(target)
observe(target, options)

매개변수

target

관찰할 Element또는 에 대한 참조입니다.
여러 개가 들어갈 수 있다.(배열로)

target argument

contentRect (legacy) : 관찰 대상의 사각형 정보

target (legacy) : 관찰 대상의 요소

contentBoxSize : 관찰 대상의 content-box(content) 크기

borderBoxSize : 관찰 대상의 border-box (content+padding+border) 크기

options

관찰에 대한 옵션을 설정할 수 있는 옵션 개체입니다. 현재 설정할 수 있는 옵션은 하나뿐입니다.

options argument

observe() : 대상 요소의 관찰을 시작한다.
unobserve() : 대상 요소의 관찰을 중지한다.
disconnet() : ResizeObserver 인스턴스가 관찰하는 모든 요소의 관찰을 중지한다.

box
관찰자가 변경 사항을 관찰할 상자 모델을 설정합니다. 가능한 값은 다음과 같습니다.

content-box(기본값)
CSS에 정의된 내용 영역의 크기입니다.

border-box
CSS에 정의된 상자 테두리 영역의 크기입니다.

device-pixel-content-box
요소 또는 해당 조상에 CSS 변환을 적용하기 전에 CSS에 정의된 콘텐츠 영역의 크기(장치 픽셀)입니다.

참조

https://developer.mozilla.org/ko/docs/Web/CSS/object-fit
https://velog.io/@jjuice/Resize-Observer