[React] 중복 클릭 방지 구현하기

문제 발생

컴퓨터로 웹을 실행하게 되면 기록 및 피드를 등록할때 빠르게 등록이 되지만 모바일 같이 느린 데이터를 사용하는 기기는 지금 등록중인지 아닌지를 확인하기가 어려워서 사용자가 중복으로 클릭한다는 문제점이 발생하였다.

 

해결

우선 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이 실행되게 설정해 놓았다.

 

구현 화면