React-Navigation 루트 이동 시 마다 작동하는 함수 적용

axios interceprtor를 사용해서 response값에 토큰 유효 만료시에 토큰 재발급 요청을 하고 바로 토큰을 받아오는 로직 구현 이후에 중복 로그인에 의해 토큰 재발급이 되지 않는 로직을 처리 하기 위해 Interceptor에 Navigation을 사용해서 로그인 페이지로 이동 하게 하려 했지만 interceptor 를 사용하는 apis폴더의 경우 NavigationContainer아래에 포함되지 않은 폴더라서 navigation('login')이 먹히지 않았다. 그래서 해당 오류코드 발생 시 일단 refresh token을 지웠다. 그리고 페이지 이동할 때마다 스토리지에 refresh token이 없는지 체크하고 없으면 자동 로그아웃 시키는 로직을 구현하기로 마음 먹었다.

onStateChange

NavigationContainer에서 Nav route가 바뀔 때 마다 실행되는 onStateChange함수를 사용했다.

 <NavigationContainer ref={navRef} linking={null}
        onStateChange={async () => {
            await getStorage("refreshToken").then((v) => {
              if (!v) {
                removeStorage("token")
                removeStorage("autoLogin")
                removeStorage("setting")
                navRef.navigate('Login')
              }
              }
        }
      >

그런데 여기서 문제가 발생했다. 이렇게 되면 모든 페이지 이동마다 refreshToken을 체크하게 되고 token이 필요 없는 로그인, 회원가입 등의 페이지에서또한 해당 함수가 작동하게 되게 되었다. 그래서 추가적인 방법을 찾다가 route name을 가져오는 함수를 찾게 되었다.

navRef.getCurrentRoute().name

<NavigationContainer ref={navRef} linking={null}
        onStateChange={async () => {
          const currentRouteName = navRef.getCurrentRoute().name;
          if (currentRouteName === "Login" || currentRouteName === "Signup") {
          } else {
            await getStorage("refreshToken").then((v) => {
              if (!v) {
                removeStorage("token")
                removeStorage("autoLogin")
                removeStorage("setting")
                navRef.navigate('Login')
              }
            })
          }
        }}
      >

이렇게 route의 이름을 가져와서 해당 페이지 일 때는 함수를 작동시키지 않게 할 수가 있었다.