[fitpet] isLoading으로 적용시킨 스켈레톤 UI가 안 불러와 짐

go·2021년 9월 12일
0

오늘의 실수

목록 보기
3/3

상황

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를 사용하여 봤으나, 초 단위로 볼 생각은 하지 못했었다.

초 단위로 보지 못하니 빠르게 움직이는 데이터의 값이 뭐가 문제인지 캐치하기도 어려웠고, 당연히 문제의 원인을 인지하지도 못했다.

이번에 초 단위로 직접 움직여 보니 원인을 바로 찾을 수 있었다.

0개의 댓글