캐러셀, 슬라이드 관련해서 오류가 발생했다. 우리 프로젝트는 캐러셀을 직접 구현다보니 ref를 사용해 DOM의 직접적으로 접근한 후**Element.getBoundingClientRect()**메서드를 사용해서엘리먼트의 크기와 뷰포트 에 상대적인 위치 정보를 ref에 담아준 후 css에 translateX 기능을 이용하여 해당 element가 버튼을 눌르시에 슬라이드 되도록 구현해보았다.
구현하는 도 중 리렌더링 되기전 ref 접근해서 undefined인 elemnet에 접근하다보니 **Element.getBoundingClientRect()**메서드를 사용할 수 없다는 오류가 발생했다.
대충 페이지가 렌더링 되기 전에 ref의 값을 사용하려고 해서 생기는 오류 같았다.
그래서 sreetRef.current의 값이 없다면 예외처리 해주는 로직을 작성해서 해결할 수 있었다.
이 방법이 정말 좋은 방법인지는 좀더 알아보고 생각을 해봐야겠지만 이 문제를 해결하면서 리액트 Suspense 등 또 여러 가지 해결방안도 알게 되었던 것 같다.
https://17.reactjs.org/docs/concurrent-mode-suspense.html
TypeError: Cannot read property 'getBoundingClientRect' of null
I'm trying to create a header with a Sticky effect, but I'm having this error when scrolling the page, sometimes it works and sometimes the error happens. Can anyone help me with this problem? c...
stackoverflow.com
Trouble shooting 일지 - 광고 플랫폼 app 편 #1
recoil을 사용해서 만든 여러 프로젝트에서 동일하게 발생한 에러의 원인을 찾고 이것을 해결해서 애플리케이션 정상 작동하게 만들기 #1. 경고1 Warning : Can't perform a React state update on a component that h
velog.io
'트러블슈팅' 카테고리의 다른 글
| 무한 스크롤 관련 트러블 슈팅 (0) | 2023.02.05 |
|---|---|
| Video 관련 커스터마이징 컴포넌트 (0) | 2023.02.05 |
| 서버와 axios 통신, json방식일때 payload 상태 400에러 (0) | 2022.12.23 |
| github Permission 오류 (1) | 2022.12.12 |
| axios. (0) | 2022.12.09 |