2021.6.25(thu)_에러 처리 컴포넌트, 스켈레톤 UI

Q랑 프로젝트를 같이 하면서 배우는 게 많다. 

미션 마감까지 기능 구현하느라 급할 수 있는데 에러 처리라던지 로딩 처리를 하는 것을 보고 많이 배웠다👍🏼

 

useRecoilValueLoadable의 state === 'loading'이면 스켈레톤, state === 'hasError'이면 에러 컴포넌트

function LabelTable() {
  const { state, contents } = useRecoilValueLoadable(LabelOrMilestone('label'));

  return (
    <LabelTableWrap>
      <TableHeader />
      {state === 'loading' && <LabelsSkeleton />}
      {state === 'hasError' && <ErrorLabel>{contents}</ErrorLabel>}
      {state === 'hasValue' &&
        contents.map((labelInfo: labelInfoType) => {
          return (
            <LabelCell
              key={labelInfo.id}
              labelInfo={labelInfo}
            />
          );
        })}
    </LabelTableWrap>
  );
}

 

 

✱에러 처리 컴포넌트

Q의 이슈리스트 에러 컴포넌트를 보고 라벨 에러 컴포넌트로 작성했다. 

 

1. 모달창을 띄울 시간을 time 상태로 만들고

2. 그 time이 지나면 다시 setTime(0)

3. time 상태 값에 따라서 styled-components에서 display: flex에서 none으로

function ErrorLabel({ children }: Props) {
  const [time, setTime] = useState(3000);
  const text = `이 창은 ${time / 1000}초 후에 자동으로 사라집니다.`;

  // time 상태값만큼 시간이 지나면 모달창이 꺼지도록 setTime(0)
  setTimeout(() => setTime(0), time);
  
  return (
    <ErrorWrap time={time}>
      {children}
      <span>{text}</span>
    </ErrorWrap>
  );
}

export default ErrorLabel;

type seconds = {
  time: number;
};

const ErrorWrap = styled.div<seconds>`
  ...
  display: ${({ time }) => (time ? 'flex' : 'none')};
  flex-direction: column;
  justify-content: center;
  ...
  }
`;

 

 

✱스켈레톤 UI

chakra UI의 Skeleton을 사용해서 만들었다.