[TIL] React Router, Sass

Reactに触れる前に、各ブラウザウィンドウにhtmlドキュメントを作成します.
この方式をマルチページアプリケーションと呼ぶ.ただし,Reactは単一ページアプリケーション(SPA)を用いている.ページがいくらあっても.つまりhtmlファイルは1つしかありません.
正確にはReactはUIのみを処理するのでRouterはこれらのSPAを実現することができる.

1.ルーティングの定義

ルーティングとは?

異なるパス(urlアドレス)に応じて異なる画面が表示されます。

CRAにはルーティングロジックがなく、react-routerをインストールしてコンポーネントを実装する必要があります.

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Nav from "./components/Nav/Nav";
import Footer from "./components/Footer/Footer";
import Login from "./pages/Login/Login";
import Signup from "./pages/Signup/Signup";
import Main from "./pages/Main/Main";

function Router() {
  return (
    <BrowserRouter>
      <Nav /> 
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
      <Footer /> 
    </BrowserRouter>
  );
}

export default Router;

そしてindexjsでRealtDOM部分を少し修正します.

ReactDOM.render(<Router />, document.getElementById('root'));

2.ルーティングの移動方法

2-1. Link

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

function Login() {
 return (
   <div>
     <Link to="/signup">회원가입</Link>
   </div>
 );
}

export default Login;

1つ目の方法は、リンクラベルを使用することです.react-router-domからインポートし、aラベルのように設定したパスを移動できます.しかし、異なる点は、aタグは外部サイトに移動するために使用され、リンクタグはプロジェクト内でページを切り替えるために使用される.

2-2. useNavigate

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

function Login() {
 const navigate = useNavigate();

 const goToMain = () => {
   navigate("/main");
 };

 // 실제 활용 예시
 // const goToMain = () => {
 //   if(response.message === "valid user"){
 //     navigate('/main');
 //   } else {
 //     alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.")
 //     navigate('/signup');
 //   }
 // }

 return (
   <div>
     <button className="loginBtn" onClick={goToMain}>
       로그인
     </button>
   </div>
 );
}

export default Login;

Linkのようにreact-router-domからインポートされますが、違いがあります.
このuserNavigateは論理を実現するために用いられる.たとえば、登録時に会員登録がない場合は登録会員ページに移動し、登録会員がいる場合はホームページに移動します.
見るとifゲートを思い出します.逆に、NavbarやAside menuのようにクリックすると、論理を必要とせずに直接移動し、リンクタグを使用します.

3.SASSの定義

SASSとは?

Syntactically Awesome Style Sheets

文法上の巨大なスタイルシートの意味のように、既存のcssフォーマットをより簡単にアップグレードしたスタイルシートフォーマットです.
これらのcssからsassに変更するには、まずインストールが必要です.

npm install sass --save

および既存の拡張子.cssで.scssに変えるべきです.(import構文を含む)

4.SASSのメリット

4-1. Nesting機能

図に示すように、JSXの最上位要素のclassNameをコンポーネント名と同じに設定し、最上位要素とサブ要素を区別して可読性を高めます.

4-2. 変数の使用

$jb-font: "Times New Roman";
$jb-size: 20px;
$jb-color: #444444;
h1 {
  font-family: $jb-font;
  font-size: $jb-size;
  color: $jb-color;
}

上図に示すように、共通属性は変数に格納され、同じ属性が与えられた場合に使用されます.