React 로그인 컨셉

Recat, react-router-dom(v6)

import React, { useState } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";

const AppRouter = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(true);
  return (
    <Router>
      <Routes>
        {isLoggedIn ? (
          <>
            <Route path="/" element={<Home />} />
          </>
        ) : (
          <Route path="/" element={<Auth />} />
        )}
      </Routes>
    </Router>
  );
};

export default AppRouter;

isLoggedIn
상태값이 true 이면 / 루트에 Home 컴포넌트
상태값이 false 이면 / 루트에 Auth 컴포넌트

useState() 이사 보내기

 const [isLoggedIn, setIsLoggedIn] = useState(true);

라우터 컴포넌트에서는 라우트 기능에만 신경쓸수있게
useState를 App 컴포넌트로 넘겨서 Props로 전달해주는 것도 고려해보기

삼항연산자로 내용 컨트롤

{정보? "true 일때 보여줄값" : "false일때 보여줄 값"}

로그인 했냐 안했냐,
기존 아이디냐 아니냐,

Navigation 분리

Nav 컴포넌트로 관리

import React, { useState } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";
import Navigation from "./Navigation";

const AppRouter = ({ isLoggedIn }) => {
 return (
   <Router>
     {/* 모두 참이면 마지막 값 반환 */}
     {isLoggedIn && <Navigation />}
     <Routes>
       {isLoggedIn ? (
         <>
           <Route path="/" element={<Home />} />
         </>
       ) : (
         <Route path="/" element={<Auth />} />
       )}
     </Routes>
   </Router>
 );
};

export default AppRouter;

import React from "react";
import { Link } from "react-router-dom";

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/profile">My Profile</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;