[RN] 로그인/로그아웃 후 화면 이동

기능할 구현: 앱 접속 시 로그인이 되어있으면 메인 화면 보여주고, 아니라면 로그인 창 띄우기 + 로그아웃 시 바로 로그인 창 띄우기

(asyncStoarge로 토큰을 저장하여 로그인 유지를 했고, navigation을 사용해 화면 이동을 구현했다)

 

1. 메인 화면에서 토큰을 얻고, 토큰이 없다면 로그인 화면으로 이동시킴
2. 로그인 후 async-storage를 사용해 토큰 저장하고 로그인 유지
3. 로그아웃 시 navigation reset을 사용하여 메인으로 이동시키며 화면 새로고침 (바로 로그인 창 띄우기 위해)

// main
const [token, setToken] = useState('');

useEffect(() => {
  getToken();
}, [])

const getToken = async () => {
  try {
    const value = await AsyncStorage.getItem('token');
    if (value !== null) {
      const data = JSON.parse(value);
      setToken(data)
    } else {
      navigation.navigate('Login')
    }
  } catch (err) {
    console.log(err);
  }
}

메인에 접속 시 useEffect를 통해 토큰을 얻는 함수를 실행한다.

asyncStorage에 토큰이 없으면 로그인 상태가 아니므로 navigation을 통해 로그인 화면으로 이동시켰다.

// Login
await AsyncStorage.setItem('token', JSON.stringify(token.accessToken));
navigation.pop();
navigation.reset({ index: 0, routes: [{ name: 'Home' }] });

로그인 성공 시 asyncStorage에 토큰을 저장하고 navigation pop 수행 후, 메인으로 이동해 주었다.

reset을 사용하여 화면을 이동시키며 새로고침 하는 것이 핵심이다.

// Logout
AsyncStorage.removeItem('token');
setSettingModalState(false); // 모달창에서 로그아웃 시 포함
navigation.reset({ index: 0, routes: [{ name: 'Home' }] });

로그아웃 시 asyncStorage에서 토큰을 지우고 메인으로 이동시켜 주었다.

이것도 로그인과 마찬가지로 reset을 사용하여 화면을 이동시키며 새로고침 해주었다.

 

화면 이동 후 해당 화면에서 함수를 다시 실행할 일이 필요하다면 reset을 통해 새로고침 해주는 것이 좋다.

+) reset을 사용하면 해당 화면에서 전으로 돌아가지 못한다.