React Rout로 Login Redirect 하는 방법

Intro. 무슨 문제가 있었는가

Login을 하지 않고, 바로 회원 등록 페이지인 register로 리다이렉팅 되는 것을 구현하던 중 발생한 문제 해결 방법이다.

if (googleAuth == null || googleAuth?.status == "REGISTER") {
	navigate("/");
}

Hook을 써서 유저를 판단하고 페이지 접근을 제어하는 모듈이 따로 존재하기에, 위의 코드처럼 register 페이지에 navigate(“/”)를 붙였더니 에러가 발생 했다.

Can’t perform a React state update on a component that hasn’t mounted yet 에러인데, 요약하면, 렌더링하는 동안 state에 접근하면 안된다는 것이다.

내가 작성한 코드 흐름 대로라면, register 페이지가 로딩 될 때 state에 접근하기 때문에 에러가 발생한거였다

시도 : register로 가는 Routes에서 분기를 하면 안되는가?

<Route path="/register" element={googleAuth == null || googleAuth?.status == "REGISTER" ? Auth(Home, null) : Auth(Register, null)}></Route>

위 코드 대로라면, 일단 로딩 중 state에 접근 할 일이 없으니 에러는 해결 된다.
하지만, URI가 /register인 상태로 로그인 컴포넌트를 불러온다
완전한 redirect가 아닌거다

시도 : Redirect를 활용하자

<Route
	path="/register"
	element={googleAuth == null || googleAuth?.status == "REGISTER" ? <Navigate to={"/"} /> : Auth(Login, null)}>
</Route>

삼항 연산자를 그대로 쓰되, 로그인 페이지를 바로 부르지 않는다.
대신 조건을 충족하지 않으면, 로그인 페이지로 리다이렉팅하도록 하였다

코드를 살짝 설명하면, googleAuth에는 회원 가입을 할 유저의 임시 정보가 저장 되어 있다.
만약 이 정보가 비어있거나 status가 register가 아니면, register로 접근하지 못하고 홈으로 리다익레팅 된다

하지만 이 경우에 register 페이지로 넘어 갈 때 React has detected a change in the order of Hooks called by App가 발생하게 된다.

해결 방법

• 맘 편하게 useEffect를 사용하면 된다. 어떻게 보면 상태관리에서 생긴 문제인데, 내가 너무 돌아갔다
• Register 페이지의 useEffect에서 분기 처리를 하는거다.

  const fetchData = () => {
    if (googleAuth == null || googleAuth?.status != "REGISTER") {
      navigate("/");
    }
    if (isLoading) return <Loading />;
    if (isError) return <Error error={error} />;
    setCampusList(data);
  };

  useEffect(() => {
    fetchData();
  }, [data]);