캐러셀에서 다중 이미지 로드시 스켈레톤을 보여주는 방법

Question

캐러셀 안에서 이미지 컴포넌트를 map으로 그려주고 있습니다. 이미지 컴포넌트가 로드중일 때 스켈레톤을 보여주고 싶은데 이슈가 있습니다. 이슈: 여러 이미지 컴포넌트를 그릴 때 이미지가 하나라도 로딩중이면 스켈레톤 + 컴포넌트가 동시에 보임 컴포넌트 예시 ex) const imageRef = useRef(null); const isComplete = imageRef.current?.complete; {!isComplete && } {alt}

위와 같은 코드를 작성했는데 ref값이 세팅되기 전에 isComplete가 undefined인 순간이 있어서 그런 것 같습니다... 그래서 코드를 다음과 같이 수정했는데 스켈레톤이 무한으로 로딩되네요.. {!isComplete ? : {alt}

} 로딩시에 스켈레톤을 보여줄 수 있는 좋은 방법이 있을까요?

성원 · Answer

{!isComplete ? : {alt}

} 이 코드를 보면 이미지 태그가 조건부로 렌더링되는데, isComplete값이 항상 false라서 ref가 브라우저 돔의 img 값을 못 참조하고 있네요. 아마 undefined를 리턴하고 있을 것 같은데요 따라서 스켈레톤만 화면에 보이는 것 같습니다. 이렇게 바꿔보면 어떨까요? {alt}

display:none을 사용하면 이미지 태그가 돔 트리에 생성되기 때문에 ref가 img 값을 참조할 수 있습니다. 따라서 isComplete 값도 변경됩니다. 주의할점은 const isComplete = imageRef.current?.complete; 이런식으로 isComplete값을 참조하고 있는데, ref의 current값은 변경되어도 컴포넌트를 렌더링시키지 않습니다. 따라서 isComplete 값은 state로 관리하고 onLoad 시점과 complete 시점에 state를 변경할 수 있도록 수정하면 될 것 같습니다