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

Question

안녕하세요

개인적으로 만들고 있는 프로젝트에서

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가 개발자도구와 맞지 않는 문제가 발생하고 있습니다.

일단은 임의로 보정값을 넣어서 원하는 결과물은 나왔지만 찝찝한 마음이 들어서요

이 문제의 원인을 찾고 싶습니다.

감사합니다!

김하림 · Accepted Answer

`getBoundingClientRect()`로 계산된 width가 약 `157px`이고, 개발자 도구에서 보는 width가 `132px`이므로 약 `25px`정도의 차이가 보입니다.
이 `25px`의 차이는 아마도 패딩과 보더를 포함했느냐의 차이로 추정되는데, `25px`의 차이는 패딩+보더 픽셀의 차이일 가능성이 있습니다. 혹은, 부모 컴포넌트에 마진이 적용된 것으로 보이는데, 해당 마진 값을 포함한 너비일 가능성도 있어 보이네요.
기재해주신 CSS에서 `padding: 5px 10px`과 `border: 2px solid white`를 계산해보면 패딩이 좌우로 `10px`씩 총 `20px`, `border`가 좌우로 `2px`씩 총 `4px`이 됩니다. 좌우 패딩 `20px` + 좌우 보더 `4px`을 더하면 `24px`로, 엇비슷한 값이 나옵니다.
이 때, `box-sizing`이 `border-box`로 적용되었으니 너비(width)는 보더와 패딩을 포함하여 계산됩니다.
여기서 미지수인 점은 `132px`이 보더와 패딩을 포함한 너비인가? 아니면 제외한 너비인가?에 대한 부분인데요.
크롬 개발자 도구에서 요소 검사를 했을 때 보여지는 값은 보더와 패딩을 포함한 값이 보여지므로 (첨부된 스크린샷 상에서도 패딩과 보더 부분을 포함한것으로 보이네요), `132px`이 보더와 패딩이 포함된 정확한 너비로 보여집니다.
그럼, `getBoundingClientRect().width`는 왜 `157px`이라고 출력이 되는가에 대한 원인을 찾아야 하는데요.
여기부터는 코드를 보면서 파악이 필요할 것 같습니다. 제 추측으로는, 순회를 돌 때 자식 대신에 마진이 포함된 부모 컴포넌트를 잘못 참조했거나,
emotion등의 CSS-in-JS 라이브러리를 사용한 경우 렌더링 타이밍 이슈가 있거나,
CSS 설정이 잘못 되었거나 등등의 원인이 있을 거 같습니다.
크롬 개발자 도구에서 엘리먼트를 선택하고 Computed가 어떻게 계산되었는지 확인해보고, 디버깅이 필요할 것 같아요.
저도 비슷한 환경을 구성해서 테스트 해봤는데 해당 문제가 재현되지 않네요 ㅠㅠ 디버깅을 좀 더 해보라는 말씀밖에 드릴 수 없을 것 같습니다.