isLoading이 true인 경우 스켈레톤 UI를 적용시키려고 했으나, 적용시킨 이미지가 안 보이고 빈 이미지만 보임..
근데 똑같이 isLoading을 사용한 지금 이 숙소가 인기있어요
부분 스켈레톤 UI는 잘 적용됨...
그래서 뭐가 문제인지를 모르겠음,, 휴
const HotelSlider = ({ isLoading }) => {
const regions = useSelector((state) => state.hotelMain.regions);
// 210905 by.dy
// 로딩 스피너 제거 & 스켈레톤 UI 적용
return (
<SliderWrapper>
<Content>
<PillWrapper ref={slideRef}>
{regions.map((region, i) => {
return (
<div className='PillBox' key={i}>
{/* 로딩 스피너 제거 & 스켈레톤 UI 적용 */}
{<PillBoxSkeleton isLoading={isLoading} margin='0 3rem 0 0' />}
<PillBox key={region.id} region={region} margin='0 3rem 0 0' />
</div>
);
})}
</PillWrapper>
</Content>
<ControlsBtn>
<PrevBtn ref={prevBtnRef}>
<SliderLeftButton handleClick={prevSlide}></SliderLeftButton>
</PrevBtn>
<NextBtn ref={nextBtnRef}>
<SliderRightButton handleClick={nextSlide}></SliderRightButton>
</NextBtn>
</ControlsBtn>
</SliderWrapper>
);
regions 데이터와 hitsList 데이터가 불러와 지는 시간이 달라서 isLoading보다는 region의 값이 있느냐 없느냐에 따라 스켈레톤 UI를 보여주는 게 더 적합할 것 같다는 팀원의 조언을 받아 코드를 수정했다.
<Content>
<PillWrapper ref={slideRef}>
{/* regions 데이터가 없을 때 (로딩 중) */}
{regions.length === 0 ? (
<>
<div className='PillBox'>
{<PillBoxSkeleton margin='0 3rem 0 0' />}
</div>
<div className='PillBox'>
{<PillBoxSkeleton margin='0 3rem 0 0' />}
</div>
<div className='PillBox'>
{<PillBoxSkeleton margin='0 3rem 0 0' />}
</div>
</>
) : (
''
)}
{regions.map((region, i) => {
return (
<div className='PillBox' key={i}>
{/* 로딩 스피너 제거 & 스켈레톤 UI 적용 */}
<PillBox key={region.id} region={region} margin='0 3rem 0 0' />
</div>
);
})}
</PillWrapper>
</Content>
리덕스 개발자 도구로 액션이 발생할 때마다 state, diff를 사용하여 봤으나, 초 단위로 볼 생각은 하지 못했었다.
초 단위로 보지 못하니 빠르게 움직이는 데이터의 값이 뭐가 문제인지 캐치하기도 어려웠고, 당연히 문제의 원인을 인지하지도 못했다.
이번에 초 단위로 직접 움직여 보니 원인을 바로 찾을 수 있었다.