사소하지만 사용자의 경험을 개선하는 코드 사례 1

사용자 경험을 개선하는 사례가 있으면 작더라도 남기려고 합니다.

문제 상황

• 좋아요 클릭 시 2초 동안 토스트 팝업이 뜨도록 구현하였으나 좋아요 버튼을 짧은 시간에 여러 번 클릭하게 되면 토스트 팝업이 빠르게 사라지는 문제가 발생하였습니다.
  

문제 원인

• 좋아요 버튼을 눌렀을 때 setTimeout으로 2초 뒤에 활성화 상태를 변경하여 토스트 팝업이 사라지게 구현하였는데, 2초가 지나기 전에 다시 좋아요 버튼을 누를 경우 이전에 작동한 setTimeout이 이후에 토스트 팝업에 영향을 미치게 되었습니다.
  
• 이렇게 여러 번 버튼을 누를 경우 setTimeout이 여러 번 실행, 종료되며 다음 버튼을 누르면 뜨는 토스트 팝업의 상태에 영향을 미치게 된다는 걸 확인하였습니다.

문제 해결

• setTimeout이 작동되는 중에 다른 setTimeout이 걸리지 않도록 상태를 추가하여 해결하였습니다.

  // ...
  const [isNotTimeout, setIsNotTimeout] = useState(true);

  const favoriteBtnHandler = () => {
    if (isNotTimeout) {
      setTimeout(() => {
        // ...
        setIsNotTimeout(true);
      }, 2000);
    }

    // ...
    setIsNotTimeout(false);
  };
// ...

• isNotTimeout 상태가 통해 좋아요 버튼이 눌리게 되면 false로 바뀌게 되며 setTimeout을 통해 2초 뒤에 true로 바뀌게 됩니다.
• 그리고 조건문을 통해 isNotTimeout의 값이 true일 때만 setTimeout을 실행하게 합니다.
• 이렇게 하면 setTimeout이 종료 되기 전에 여러번 클릭하더라도 setTimeout은 한 번만 실행되게 됩니다.
  

해결된 화면