리액트 새로고침 시 대응방법

현재 프로젝트에서 음성채팅을 할때 토큰을 발급을 받는데, 통화종료를 누르면 토큰이 반납되는 방식으로 구현이 되어있다.

그런데 사용자가 만약에 새로고침을 해버린다면 토큰이 반납이 되지않아 다시 음성채팅에 참여할 수 없게 되어버렸다.

이러한 문제를 해결하기 위해서 새로고침에 대한 대응을 마련해야했다.

 

초기에는 다음과 같이 생각했다.

그냥 새로고침 감지되면 무지성으로 요청 보내기. 

하지만 이경우에는 문제가 발생했는데, 새로고침이 감지된 순간에 React state 값들이 처음 선언했던 값으로 바뀌어버렸다는 것이다.

따라서 이 방식은 사용할 수 없었다.

  const alertUser = (e: any) => {
    console.log('새로고침 테스트');
    axios
      .post('/api/v1/webrtc/voice/remove-user', {
        sessionName: session
        email: 'ksw',
        token: voicetoken
      })
      .then((response: any) => {
        console.log('TOKEN', response);
      })
      .catch((err: any) => {
        console.log(err);
      });
  };

  useEffect(() => {
    window.addEventListener('beforeunload', alertUser);
    return () => {
      window.removeEventListener('beforeunload', alertUser);
    };
  }, []);

 

그래서 필요한 값들을 localStorage에 정의를 하여 사용하기로 했다.

문제를 해결할 수 있었지만, beforunload 시점에서 비동기 작업이 보장되지 않기때문에 추후에 문제가 생길 가능성이 매우높다.

더 좋은 방법을 찾아야한다.

const alertUser = (e: any) => {
    console.log('새로고침 테스트');
    axios
      .post('/api/v1/webrtc/voice/remove-user', {
        sessionName: window.localStorage.getItem('voiceSessionId'),
        email: 'ksw',
        token: window.localStorage.getItem('voiceToken'),
      })
      .then((response: any) => {
        console.log('TOKEN', response);
      })
      .catch((err: any) => {
        console.log(err);
      });
  };

  useEffect(() => {
    window.addEventListener('beforeunload', alertUser);
    return () => {
      window.removeEventListener('beforeunload', alertUser);
    };
  }, []);

 

Beacon API...