아래는 통상적인 개념을 서칭해본 결과이다. 나의 경우엔 반응형 웹을 구현하며 똑같은 컴포넌트를 2개 붙여넣고 화면의 크기에 따라 css에 “display:none”을 넣어서 getBoundingClientRect 메소드의 결과 값이 나오지 않는 문제였다. 그래서 반응형을 css로 구현하는게 아닌 삼항연산자를 이용하여 조건부 반환하여 해결하였다.

위 오류는 React에서 메소드를 호출하려는 요소가 실제 DOM 요소가 아니라 React가 생성한 가상 요소일 때 발생한다.  getBoundingClientRect() 함수는 DOM 요소에서 사용할 수 있는 메서드이다. React의 가상 DOM에서는 사용 하지 못한다.

이 오류를 해결하려면 메소드를 실제 DOM 요소에서 호출하는 것이 아니라 React 컴포넌트 또는 가상 요소에서 호출하는 것이 아니라는 것을 확인해야 한다.

이 함수를 React 컴포넌트에서 사용할 때, 컴포넌트가 렌더링 되고 난 후 DOM에 접근하여getBoundingClientRect() 함수를 실행해야 한다.

리액트 컴포넌트가 렌더링 되기 전에 getBoundingClientRect() 함수를 실행하면, 컴포넌트가 아직 DOM에 삽입되지 않았기 때문에 이러한 에러가 발생합니다.

이를 해결하는 방법으로는 클래스형 컴포넌트에서는 componentDidMount() 라이프사이클 메소드나, useEffect() 훅을 사용하여 DOM에 접근 하는 방법, ref를 사용하여 기본 DOM 요소에 액세스한 다음 메소드를 호출 할 수 있다.

componentDidMount() {
  const rect = this.node.getBoundingClientRect();
  // do something with the rect
}

render() {
  return <div ref={node => (this.node = node)} />;
}

함수형 컴포넌트에서는 useRef 훅을 사용하여 DOM 요소에 접근할 수 있다.

import { useRef } from 'react';

function MyComponent() {
  const nodeRef = useRef(null);

  useEffect(() => {
    const rect = nodeRef.current.getBoundingClientRect();
    // do something with the rect
  }, []);

  return <div ref={nodeRef} />;
}

useRef 훅을 사용하면 컴포넌트가 렌더링된 후에 DOM 요소에 접근 할 수 있습니다. 위 코드는 useEffect 훅에서 DOM 요소를 참조하며 컴포넌트가 렌더링된 후에 getBoundingClientRect() 함수를 실행합니다.

또한, useRef 훅을 사용하면 이전 렌더링과 현재 렌더링 사이의 값들을 유지할 수 있다.