앱 구조 잡기(Structure of App)

1. /src/components 폴더, /src/routes 폴더 생성

2. App.js components 폴더로 이동, index.js에서 App.js import path 수정하기

3. 📍 /routes 폴더에 route 만들기

• Auth.js (로그인: 인증)
• Home.js (홈: 트윗 작성 & 트윗보기)
• Profile.js (프로필)
• EditProfile.js (프로필 수정)

//function component로 만들자.
export default () => <span>Auth</span>;

//그런데 다른 파일에서 Auth를 가져다 쓸 때 자동으로 import 되게 하고 싶으면 이렇게 쓰면 된다.
const Auth = () => <span>Auth</span>;

export default Auth;

4. Routes 만들기

   ❗️ react-router-dom v.6로 작업

• react-router-dom 설치
  npm i react-router-dom

• Router는 components이기 때문에 📍 /components/Router.js를 만들어 주자

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

const AppRouter = () => {
  //useState Hook
  //로그인 안한 상태가 디플트값이 되도록 false를 넣어 두자.
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <Router>
      <Routes>
        {/* 로그인한 상태면 홈으로, 아니면 어스로, 일단 path는 둘다 /로 하자*/}
        {isLoggedIn ? (
          <Route path="/" element={<Home />}></Route>
        ) : (
          <Route path="/" element={<Auth />}></Route>
        )}
      </Routes>
    </Router>
  );
};

export default AppRouter;

5. 📍 /src/components.App.js
   App에 방금 만든 AppRouter 렌더하기

import AppRouter from "./Router";

function App() {
  return <AppRouter />;
}

export default App;

코드 수정

Router는 하나의 용도로만 쓰이는게 좋기 때문에 Router.js의 AppRouter의 useState를 삭제하자.

📍 App.js
Application(App.js)이 모든 로직을 다루게 하자.

import AppRouter from "./Router";
import { useState } from "react";

function App() {
  //🔥 useState Hook
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  //Router 렌더하기
  //🔥 AppRouter에 prop 전달하기
  return <AppRouter isLoggedIn={isLoggedIn} />;
}

export default App;

📍 Router.js

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

//🔥 App에서 AppRouter로 보낸 prop인 isLoggedIn 받기
const AppRouter = ({ isLoggedIn }) => {
  return (
    <Router>
      <Routes>
        {/* 로그인한 상태면 /으로, 아니면 /login으로 */}
        {isLoggedIn ? (
          <Route path="/" element={<Home />}></Route>
        ) : (
          <Route path="/" element={<Auth />}></Route>
        )}
      </Routes>
    </Router>
  );
};

export default AppRouter;

🔥 App.js를 사용하고 그 안에 AppRouter를 사용하는 이유는?
footer 등을 사용하기 위해서이다.
이렇게 분리하여 작성하면 AppRouter에서 스크린이 바뀌어도 푸터는 항상 나온다.

📍 App.js

import AppRouter from "./Router";
import { useState } from "react";

function App() {
  //🔥 useState Hook
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  //Router 렌더하기
  //🔥 AppRouter에 prop 전달하기
  return (
    <>
      <AppRouter isLoggedIn={isLoggedIn} />
      <footer>&copy; twinkle {new Date().getFullYear()}</footer>
    </>
  );
}

export default App;

JSX fragnent <>...</>
: 렌더하고 싶은 태그가 많은 데 상위 부모요소가 태그 전체를 감싸는 형태가 아닐 경우, 전체를 감싸는 용도로 fragnent를 사용한다.