[React Native] 로그인 네비게이션 로직 분리 + 로그아웃

AsyncStorage 사용

• 로그인 화면에서 다음과 같이 AsyncStorage를 이용해 user_id를 저장해주었다.
  - user_id는 key값. value값을 저장할 때는 JSON.stringify를 써줘야한다. key, value 모두 string값이어야 하기 때문이다.

const saveId = async id => {
        try {
            await AsyncStorage.setItem('user_id', JSON.stringify(id));
        } catch (e) {
            console.error(e);
        }
    }

로그인 여부 받아오기

• AsyncStorage 안에 user_id가 저장되어 있는지 아닌지로 로그인 여부를 판단했다.

const [isLogin, setIsLogin] = useState(false);
const getLogin = async () => {
	if(await AsyncStorage.getItem('user_id')!== null){
		setIsLogin(true);
	}
}
useEffect(() => {
	getLogin();
});

• 그 뒤, isLogin 값에 따라 navigation stack 분리

{
	isLogin ? (
		<>
        <Stack.Screen name = 'TabNavigator' component = {TabNavigator} /> 
        </>   
	) : (
    	<>
        <Stack.Screen name = 'SignInStack' component = {SignInStack} />
        <Stack.Screen name = 'TabNavigator' component = {TabNavigator} />
        </>
	)
}

로그인 여부에 따라 navigation 나눈 자세한 코드는 다음 링크 참고 -> Navigator 구성

로그아웃

마지막으로 로그아웃! 내가 이놈의 로그아웃 때문에 얼마나 고생했는지 모른다. 내가 navigation stack을 요상하게 쌓아놓는 바람에 navigation 메소드로 넘어가는 걸 포기하고 앱 리로딩이 되도록 만들었다.. 아직도 해결 방법을 못 찾아 그냥 앱 restart하기로 했다.

• 로그아웃 시에는 AsyncStorage에 저장해두었던 값을 지우도록 AsyncStorage.clear() 사용해주기.

const logout = async () => {
	try {
    	AsyncStorage.clear();
        restart(); // 이 부분에 로그아웃 네비게이션
    } catch (error) {
    	console.log(error);
    }
};

restart() 대신 navigation method나 자기가 원하는 화면으로 넘어가도록 잘 설정해주면 된다.
혹시 앱을 리로드하고 싶은 사람들을 위해 참고하시라고 코드 올려놓는다.

import * as Update from 'expo-updates';

export default () => Update.reloadAsync();