[Routing] 로그인 여부에 따른 로직

reverse

• reverse false (로그인 있어야 들어가짐)
• !reverse && userInfo.token ? <페이지> : <리다이랙트>
• reverse 아니고 유저 토큰이 있으면 저렇게 동작!! 맞나요? - 네네!!

• reverse true (로그인 안해야 들어가짐
• reverse && userInfo.token ? <리다이렉트> : <페이지>

const PrivateRoute = ({
  component: Component,
	redirect: Redirect,
  from,
  to,
  ...props
}) => {
  const { userInfo } = useUser();
  return (
    <Route
      {...props}
      render={props =>
        !reverse ? userInfo.token ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: to,
              state: { from },
            }}
          />
        ) : userInfo.token ? (
          <Redirect
            to={{
              pathname: to,
              state: { from },
            }}
          />
        ) : (
					<Component {...props} />
          
        )
      }
    />
  );
};

<PrivateRoute component: redirect: from: to: >
return (
	
)

<Route path="/signup" exact component={SignUpPage}>
            {hasAuth ? (
              <Redirect
                to={{
                  pathname: '/',
                  state: {
                    from: '/signup',
                  },
                }}
              />
            ) : (
              <SignUpPage />
            )}
          </Route>

💡 결론 → Route 태그를 2가지로 추상화하고 경우에 따라 달리 적용한다.