🚩권한이 있는 유저만 갈 수 있는 경로를 만든다.

권한이 없는 유저에게는 다른 경로로 틀어준다.

✏️<PrivateRoute /> Component 이용하기

function App() {
  const [auth, setAuth] = useState(false);
  const PrivateRoute = () => {
    return auth ? (
      <User auth={auth} setAuth={setAuth} />
    ) : (
      <Navigate to="/login" />
    );
  };

→ hook이 아닌 component이기 때문에 이름은 변경 가

→ auth가 true(권한이 있다면), <User />페이지로,

auth가 false(권한이 없다면), <Login />페이지로 이동한다.

✏️<PrivateRoute />의 사용법

<Route path="/user" element={<PrivateRoute />} />

→ 먼저 <User />페이지로 경로를 설정해두었다가

PrivateRoute 컴포넌트에서 auth의 true/false를 확인 후, 그대로 경로를 보여줄지 설정해준 <Login />페이지로 틀을지 결정한다.