#getboundingclientrect

개발자 도구의 width와 getBoundingClientRect().width의 길이가 다른 이유...

안녕하세요 개인적으로 만들고 있는 프로젝트에서 getBoundingClient().width의 값과 개발자 도구 상의 width 값이 다른 문제가 나와서 원인을 찾고 있습니다. div의 css는 box-sizing:border-box; padding:5px 10px; border:2px solid white; display:inline-block 입니다. 부모 div는 width 값을 정해주지 않아서 useEffect 안에서 부모 div의 children을 순회하며 자식 노드의 width를 누적해서 width값을 구하려고 하는데 첨부한 사진처럼 js로 구한 width가 개발자도구와 맞지 않는 문제가 발생하고 있습니다. 일단은 임의로 보정값을 넣어서 원하는 결과물은 나왔지만 찝찝한 마음이 들어서요 이 문제의 원인을 찾고 싶습니다. 감사합니다!

특정 요소가 보이는 것을 인식하는데 잘 맞지 않습니다.

안녕하세요. React에서 타겟 요소가 보이지 않을 때 컴포넌트 A를 표시하고 싶습니다. getBoundingClientRect를 이용해서 다음과 같이 구현하고 위의 고정된 컴포넌트 높이만큼 오프셋을 줬는데도 타겟 요소가 사라지는 타이밍과 컴포넌트가 표시되는 타이밍이 미묘하게 맞지 않습니다. 잘못 구현했거나 수정해야하는 부분이 있을까요? 코드 확인해주시면 감사하겠습니다.