[MySchedule project] 2. frontend - 레이아웃 / react- router 설정

이번시간에는 전체 레이아웃 틀을 만들고, react-router-dom hooks를 사용해보겠다.
레이아웃을 설정하기에 앞서 사용할 css 라이브러리를 선택하고, 적용시켜보자!
필자는 tailwindCss를 적용시켜보겠다.

 

1. TailwindCss 라이브러리 적용

 

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

 

해당 사이트에 들어가면 친절하게 install과정부터 사용법까지 나와있다.

- Using PostCss에 들어가서 install을 해주었음.

 

 

1) Install

npm install -D tailwindcss postcss autoprefixernpx tailwindcss init

 

npx tailwindcss init

 

 

2) 설치가 성공적으로 끝났다면 tailwind.config.js 파일이 있을것이다. 아래와 같이 content부분을 바꿔주자.

html, js 파일뿐만 아니라 tsx, jsx 파일도 tailwind 라이브러리를 사용할 예정이기에 추가로 넣어주었음.

 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,tsx,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

3) index.css 에 다음과 같이 넣어주자.

 

@tailwind base;
@tailwind components;
@tailwind utilities;

 

4) npm run start를 한번 해주고, 정상 작동 되는지 확인해보자.

 아래와 같이 className에 클래스명으로 된 css가 잘 적용되었다면 정상작동!

 

 

 

2. 레이아웃과 react-router-dom 활용하기

1) src - pages폴더와, layout폴더의 기본틀을 먼저 잡기 위해 아래와 같이 index.tsx파일들을 먼저 만듬. 

 

 

2) Layout 구성과 react-router-dom 훅을 사용해보자!

 -  react-router 기본구조는 다음과 같다.

<BrowserRouter>
    <Routes>
    	<Route />
    </Routes>   
</BrowserRouter>

 

index.tsx에 <App.tsx>를 이미 <BrowserRouter>로 감싸주었기에 App.tsx 에서는 <Routes>안에 <Route>로만 감싸주겠다.

- <Route>에 <Route>로 중첩된 경우 index element로 설정된 컴포넌트 페이지로 이동하게됨.
ex) path = "/" 인 라우트에 안의 라우트로 중첩될 경우 index element 인 MainPage로 이동한다.

- <Route>로 자식<Route>를 감싼 경우 부모element의 함수에 <Outlet >을 설정해놓으면 자식<Route>들은 설정해놓은 Header컴포넌트와 Footer컴포넌트를 상속받게됨.

 

[App.tsx] 

- 페이지 이동 경로 경우의 수는 크게 3가지로 나눌수있음.

관리자만 접속할수있는 화면들,

로그인을 하지않은(즉,인증되지않은) 사용자가 접속할수있는화면,

로그인한(인증처리가된) 사용자가 접속할수있는 화면

 

(인증된 관리자는 사용자가 접속할수있는 페이지 모두 접속 가능)

import React from "react";
import "./App.css";
import { Outlet, Route, Routes } from "react-router-dom";
import MainPage from "./pages/MainPage";
import Footer from "./layout/Footer";
import Header from "./layout/Header";
import Login from "./pages/Login";
import Register from "./pages/Register";
function Layout() {
  return (
    <div>
      <Header />
      <main className="">
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}
function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<MainPage />} />

        {/* 인증O - 관리자만 */}

        {/* 인증O - 일반유저 - 로그인 했을때 */}

        {/* 인증X - 일반유저 - 로그인 안했을때 */}
        <Route path="login" index element={<Login />} />
        <Route path="register" index element={<Register />} />
        
      </Route>
    </Routes>
  );
}

export default App;

 

 

[결과화면]

- react-router-dom을 활용해 url 에 따라 페이지 이동이 정상적으로 되는걸 볼 수 있다.