[React] Router, Sass

React를 접하긴 전에는 하나의 브라우저 창마다 하나의 html 문서를 만들었었다.
이러한 방식을 Multi Page Application이라고 한다. 하지만 React에서는 Single Page Application(SPA) 방식을 사용하고 있다. 페이지가 아무리 많아도 .html파일은 1개라는 것이다.
정확히는 React는 UI만 다루기 때문에 Router가 이러한 SPA를 구현할 수 있게 해준다.

---

1. Routing 정의

Routing이란?

다른 경로(url주소)에 따라 다른 화면을 보여주는 것.

CRA에는 routing을 위한 로직이 들어가 있지 않아서 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;

그리고 index.js에서 ReactDOM 부분을 살짝 수정해준다.

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

2. Routing 이동하는 방법

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;

첫번째 방법은 Link태그를 이용하는 방법이다. react-router-dom에서 import해와서 마치 a태그처럼 설정한 path를 이동하게 해준다. 다만 다른점은 a태그는 외부사이트로 이동하는 것이고 Link태그는 프로젝트 내에서 페이지를 전환할 때 사용된다는 점이다.

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에서 import해오지만 다른 점이 있다.
이 useNavigate는 로직을 구현할 때 쓴다. 예를 들면 로그인 시 회원가입이 되있지 않은경우 회원가입 페이지로 이동하고, 회원가입이 되있을경우 메인페이지로 이동할 때같이 말이다.
딱 보면 if문이 떠오를 것이다. 반대로 Nav bar나 Aside menu같이 클릭하면 로직이 필요없이 바로 이동하는 방식은 Link태그를 사용한다.

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;
}

위 그림과 같이 자주 사용하는 속성을 변수에 저장해서 동일한 속성을 주었을 때 편리하게 사용할 수 있게 한다.