문제 발생
컴퓨터로 웹을 실행하게 되면 기록 및 피드를 등록할때 빠르게 등록이 되지만 모바일 같이 느린 데이터를 사용하는 기기는 지금 등록중인지 아닌지를 확인하기가 어려워서 사용자가 중복으로 클릭한다는 문제점이 발생하였다.
해결
우선 react-query를 사용하고 있기때문에, react- query의 isLoading을 사용하기로 했다. 등록 중일 때(Loading)는 유저가 화면을 누를 수 없도록 dimmed처리를 하고, Spinner를 보여주며, 등록 버튼도 비활성화되게 설정하였다.
export const NewFeed = () => {
const { mutate, isLoading } = useNewFeedMutation();
return (
<>
...
<SquareBtn
title="완료"
size="l"
disabled={isDisabled || isLoading}
isDark={true}
onClick={handleClickNewFeedButton}
/>
<Modal openModal={isLoading}>
<Spinner />
</Modal>
</>
);
};
1. isLoading을 사용하여 버튼에 disabled처리 할 때, isLoading을 설정해놓는다.
2. dimmed처리를 해주는 Modal 컴포넌트와 Spinner 컴포넌트를 제작하고 isLoading 상태일때, Modal이 실행되게 설정해 놓았다.
구현 화면
'트러블 슈팅 > React' 카테고리의 다른 글
[React] useInfiniteQuery로 페이지네이션 적용하고 난 후 데이터 깜빡임 현상 (1) | 2023.12.08 |
---|---|
[React-Query] react-query useInfiniteQuery를 이용해서 페이지네이션 개선하기 (1) | 2023.12.07 |
[React] useInfiniteQuery page별로 받아오는 데이터 병합하기 (0) | 2023.12.06 |
[React] useCallback을 왜 제거할까? (0) | 2023.11.29 |
[react-query] 실행 시점 enabled, refetch를 이용하고, cache된 데이터 삭제 (1) | 2023.11.24 |