왜 계속 로그인 페이지로 이동하니?

평화롭게...? 홈 화면을 구현하던 와중 라우터에 문제가 생겼습니다.... 문제가 무엇이냐???

🛑 새로고침을 하면 로그인 페이지로?

분명 코드 상 로그인이 되어 있으면 새로고침을 해도 isLogin이 true이기 때문에 로그인 페이지로 이동하지 않을 것이라 생각했습니다.

// AuthProvider.jsx
const [isLogin, setIsLogin] = useState(false);

useEffect(() => {
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((event, session) => {
      if (session) {
        setUser((prev) => ({ ...prev, num: session.user.id }));
        setIsLogin(true);
      } else {
        setUser({ num: null, nickname: '' });
        setIsLogin(false);
      }
    });

    return () => subscription.unsubscribe();
  }, []);

이렇게 AuthProvider에서 로그인 상태에 따라 isLogin을 true 혹은 false로 설정해놓습니다.

// ProtectedRoute.jsx
const ProtectedRoute = () => {
  const { isLogin } = useContext(AuthContext);
  const { pathname } = useLocation();
  
  if (!isLogin) {
    return (
      <Navigate to="/login" replace state={{ redirectedFrom: pathname }} />
    );
  }

  return <Outlet />;
};

그 후 ProtectedRoute에서 isLogin을 받아 false일 시에는 현재 경로를 state로 가진  상태로 로그인 페이지로 이동합니다.

isLogin이 true일 시 라우터에서 자식으로 있는 컴포넌트들을 보여줍니다.

그런데 이렇게 새로고침을 누를 경우 분명히 로그인이 되어 있어 상단에 닉네임과 로그아웃이 나타나 있는데도 불구하고 로그인 페이지로 이동하는 문제가 생겼습니다.

 

분명히 isLogin이 false일 시에만 로그인 페이지로 넘어가야 하는데 말입니다. 그래서 isLogin을 출력해 보았습니다.

초기에 false가 출력된 뒤 true로 바뀌는 모습을 볼 수 있습니다.

여기서 초기 상태가 false이기 때문에 true로 바뀌기 전 로그인이 되어 있지 않다고 판단해 로그인 페이지로 이동되는 것이었습니다.

 

✅  초기 상태를 boolean 값이 아닌 값을 주자!

현재 저희 팀의 코드에서는 isLogin이 false일 시 바로 로그인 페이지로 이동되는 문제?가 있습니다.

이를 해결하기 위해 초기 상태 값을 boolean이 아닌 값으로 설정해 트리거 역할을 하도록 했습니다.

const [isLogin, setIsLogin] = useState('initial');

이렇게 초기 값을 initial로 지정한 후

if (isLogin !== 'initial') {
    if (!isLogin) {
      return (
        <Navigate to="/login" replace state={{ redirectedFrom: pathname }} />
      );
    }
  } else {
    return <h1>loading</h1>;
  }

무조건 useEffect 이후 isLogin의 값이 boolean 값으로 바뀌어야 그에 따른 라우팅을 할 수 있도록 만들었습니다.

이렇게 초기상태가 initial일 경우에는 loading이 나타나게 되고 true일 때 자식 컴포넌트를 렌더링하기 때문에 로그인 페이지로 이동하던 문제를 해결할 수 있게 되었습니다~~~

 

벌써 팀 프로젝트 3일차가 되었습니다. 초반에는 솔직히 내가 팀장 역할을 잘할 수 있을까? 나도 PR은 처음 써 보는데.... 하면서 걱정이 앞섰습니다.

하지만 좋은 팀원분들 덕분에 아주 많이 소통하고 문제를 해결하면서 점점 자신감도 생겨 너무 재미있고 행복합니다ㅎㅎ.(에러 만나면 좀 그렇긴 해요 ㅎ) PR을 통해 팀원들은 어떻게 코드를 구현했는지, 그리고 다른 팀원들은 어떤 생각을 가지고 있는지, 비록 완벽하지는 않아도 이렇게 했으면 좋겠다~~ 방법도 같이 생각해주고 좋은 코드면 칭찬도 해주고 그렇게 한층 더 발전해 나가는 것 같습니다~~~!

 

우리 팀 흥해라~~~