return 문에서 인라인 JSX 렌더링을 사용할 때 요소의 너비 검색

Question

요소가 있고 그 너비를 계산한 다음 적어도 뷰포트 너비를 채우는 데 걸리는 횟수를 반복하고 싶습니다.

문제는 제가 사용하고 있는 인라인 JSX 렌더 스타일을 통해 너비를 얻을 수 없다는 것입니다. 종속성으로 설정하더라도 useEffect에서 refWidth isempt 오류가 계속 발생합니다.

먼저 return 문에 요소를 추가하고 너비를 가져온 다음 필요한 수의 요소를 추가하지 않고 올바르게 계산하고 렌더링할 수 있는 방법이 있나요?

CodeSandbox 링크는 여기

Answer 1

인라인 JSX 렌더링에서 요소의 너비에 액세스하려면 useLayoutEffect 후크를 사용할 수 있습니다.

으아아아

useLayoutEffect 후크를 사용하면 요소가 렌더링된 후 너비 계산이 수행되어 더 정확한 결과를 얻을 수 있습니다.