코딩쌀롱
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을 사용해서 만들었다.
'회고 > 하루 기록' 카테고리의 다른 글
2021.7.16(fri)_SSR, CSR (0) | 2021.07.17 |
---|---|
2021.7.2(fri)_앞으로 할 것 (2) | 2021.07.02 |
2021.6.23(wed)_POST 요청 시 415 에러 (0) | 2021.06.25 |
2021.6.21(mon)_event delegation, bubbling (0) | 2021.06.22 |
Comments