[React] 비밀번호 재설정 페이지(debounce 사용하기)

이전 포스트에서 비밀번호 재설정 페이지를 구현한 방법에 대하여 작성 했었다. 이전 포스트에서 마지막 쯤 사용자가 비밀번호를 다 입력한 것 같으면 에러 메세지가 나타날 수 있게 하면 좋겠다고 했는데 오늘 그 방법을 알게 되어 어떻게 작동 하는지 기록해보려고 한다.

이전 포스트 ⬇️

https://developerdaeun.tistory.com/68

[React] 비밀번호 재설정 페이지

 

우선 사용한건 debounce이다. 

Debouncing 이란

인련의 연속적인 이벤트 중 일부를 무시하고 일정이 지난 후에 마지막 이벤트만 처리하는 기술이다. 특히 입력 필드에서 사용자의 타이핑과 같이 빈번하게 발생하는 이벤트에 적용된다. 그리고 디바운싱은 일정 시간 동안 이벤트가 더 이상 발생하지 않아 해당 이벤트를 처리하도록 하는 것이다. 그래서 연이어 발생하는 이벤트에 대한 처리를 최적화할 수 있다.

그럼 나는 이 디바이싱을 어디에 해야할까.. 고민해본 결과 아무래도 input에 입력한 값이 바뀔 때 마다 호출 되는 함수에 적는게 정답이 아닐까 생각했다. 그래서 이전 포스팅에 적었던 코드에 붙여서 적어보겠다.

const handlePasswordInput = useCallback(
    debounce((e, whatToChange) => {
      console.log('입력');
      if (whatToChange === 'newPassword') {
        setNewPassword(e.target.value);
      } else if (whatToChange === 'confirmPassword') {
        setConfirmPassword(e.target.value);
      }
    }, 500),
    []
  );

함수에 debounce를 추가한 후 Input에 value 코드를 삭제했다. 처음에 value 코드를 삭제하지 않으니 input 칸에 아무 값도 적히지 않아서 지워보니 잘 작동 되어 삭제하는게 맞다고 생각했다.

value = {newPassword}

이 코드를 삭제하면 된다는 뜻!

결과

함수에 간단하게 코드를 추가한 후 바뀐 점은 사용자가 input에 값을 입력을 다 한 후 에러 메세지가 뜬다는 점이 바뀌었다. 원래는 사용자가 입력하고 있을 때도 에러 메세지가 떴었는데 이젠 사용자가 입력을 끝낸 후 일정한 시간 뒤에 에러 메세지가 뜬다. 

 

그렇지만 디바운싱에도 단점이 있다!

디바운싱은 일정 시간의 지연을 가지기 때문에 실시간 반응이 필요한 상황에서는 사용하기 어렵다. 예를 들어 채팅이나 빠른 응답이 필요한 경우에는 디바운싱이 사용자되면 사용자 경험이 저하될 수 있다. 그리고 마지막 이벤트만 처리할 땐 중간에 발생한 이벤트는 무시되기 때문에 사용자의 연속적인 입력 중간에 중간 결과를 보여주거나 중간 단계의 처리가 필요한 경우에는 사용하지 않는 것이 좋다. 그리고 마지막으로 디바운싱이 일어나는 동안에도 상태 변경이 발생할 수 있으므로, 이에 대한 처리가 꼭 필요하다. 예를 들어, 네트워크 요청 중 디바운싱이 발생하면 응답을 받기 전에 다른 요청이 발생할 수 있기 때문이다. 

 

일부 상황에서는 실시간 반응이 중요하거나 중간 결과를 표시해야 하는 경우에는 디바운싱이 적절하지 않을 수 있다. 그러니 적절한 때에 디바운싱을 하도록 하자!