navigation.goBack() 중복 호출 방지하기

 

앱 내에서 스택 관리는 주로 react-navigation 라이브러리로 이루어집니다.
페이지 헤더나 별도의 버튼을 통해 이전 스택으로 돌아가는 "뒤로가기" 동작은 navigation.goBack() 함수를 사용합니다.
다만, goBack() 함수가 실행될 때마다 스택에서 -1이 되므로, 의도치 않은 동작이 발생할 수 있다는 점을 주의해야 합니다.

const onBackEvent = () => {
  navigation.goBack()
  navigation.goBack()
  navigation.goBack()
}

return (
  ...
  <Btn onPress={onBackEvent} />
  ...
)

 

위 예제에서 onBackEvent 함수가 실행되면 3개 이전의 페이지로 되돌아가게 됩니다.

실제로 뒤로가기 기능을 이렇게 구현할 개발자는 없겠지만,

navigation.goBack() 함수가 동작하기 전에 사용자가 버튼을 여러 번 터치하면

JS 콜 스택에 goBack() 함수가 쌓여 여러 번 호출될 수 있습니다.

 

그렇다면 이러한 이벤트 중복 호출을 어떻게 방지할 수 있을까요?

버튼 중복 호출을 방지하는 여러 방법이 있지만,

JavaScript에서 가장 잘 알려지고 간단한 lodash.debounce()를 사용해 문제를 해결해 봅시다.

 

debounce는 첫 번째 인자로 실행할 함수를, 두 번째 인자로 대기 시간(ms)을 받아

해당 대기 시간 동안 호출되는 함수를 한 번만 실행하는 역할을 합니다.

const onBackEvent = debounce(() => {
  navigation.goBack()
}, 500)

 

사용자가 onBackEvent를 여러번 호출한다면

가장 마지막으로 호출한 시점을 기준으로 0.5초 뒤에 navigation.goBack() 함수가 실행될 것입니다.

그러나 이 방법으로는 100% 중복 호출을 방지할 수 없습니다.

디바이스 메모리 성능이 좋지 않거나 랜더링이 많이 일어나 페이지 로딩이 길어져 사용자가 0.5초 뒤에 onBackEvent를 호출하게 된다면

여전히 JS 콜 스택에는 같은 함수가 여러번 쌓여 있겠죠.

 

그렇다고 wait 단위를 높이게 되면 안전성은 올라가지만 사용자 경험은 현저히 줄어들 것입니다.

그런데 debounce에는 세 번째 인자가 있다는 사실을 알고 계셨나요?

 

✅ Resolve

DebounceSettingsLeading은 leading, maxWait, trailing 옵션이 존재하는데,

우리가 이 문제를 해결하기 위해 사용할 옵션은 leading(boolean)과 trailing(boolean) 두 가지 입니다.

leading: true 옵션을 사용하여 첫 번째 호출은 즉시 실행되도록 하고,

trailing: false로 설정하여 시간이 지난 후에도 마지막 호출이 실행되지 않도록 합니다.

 

완성된 onBackEvent 함수는 아래와 같습니다.

 const onBackEvent = debounce(() => {navigation.goBack()},
    300,
    {leading: true, trailing: false},
  );

 

이제 onBackEvent 함수가 호출되면 동작은 즉시 일어나고, 여러번의 호출이 생겨나더라도 단 한 번만 함수는 실행될 것입니다.