15.8.4 로그아웃 기능 구현하기

이제 로그아웃 기능을 구현해봅시다. UserContext에 사용자 정보가 채워진 상태면 사용자 메뉴 화면에서 로그인/회원가입 메뉴 항목을 숨기고, 로그아웃 메뉴 항목을 보여줘야 합니다.

UserMenuScreen 컴포넌트를 다음과 같이 수정해보세요.

screens/UserMenuScreen.tsx

(...) 
import {clearToken} from '../api/client';
import {useUserState} from '../contexts/UserContext';

function UserMenuScreen() {
  const navigation = useNavigation<RootStackNavigationProp>();

  const [user, setUser] = useUserState();
  const onLogin = () => navigation.navigate('Login');
  const onRegister = () => navigation.navigate('Register');
    const onLogout = () => {
    setUser(null);
    clearToken();
  };

  return (
    <View>
      {user ? (
        <MenuItem name="로그아웃" onPress={onLogout} />
      ) : (
        <>
          <MenuItem name="로그인" onPress={onLogin} />
          <MenuItem name="회원가입" onPress={onRegister} />
        </>
      )}
     </View>
  );
}

export default UserMenuScreen;