[React]React Router, Sass

1. SPA가 무엇인지 설명할 수 있다
2. react-router-dom를 이용해 Routes Component를 구현할 수 있다.
3. react-router-dom에서 Routing을 하는 방법 2가지와 차이점에 대해 설명할 수 있다.
4. < Link> Component 와 < a> tag 의 차이점에 대해 설명할 수 있다.
5. css 전처리기의 역할에 대해 설명할 수 있다.
6. sass에서 제공하는 문법을 이용하여 css파일을 scss파일로 변환할 수 있다.

SPA

Single Page Application
말그대로 페이지가 1개인 구성
다른 주소에서 다른 뷰를 보여준다 - 사용자가 북마크도 할 수 있고 서비스가 구글을 통해 유입될 수 있다.

SPA단점
앱의 규모가 커지면 자바스크립트 파일이 너무 커질 수 있다.(라우트 별로 파일을 나눠서 트래픽/로딩속도를 개선할 수 있다.)

전통적 웹어플리케이션
전통적인 웹어플리케이션 구조는 여러 페이지로 구성되어 있고 사용자가 요청할 때 마다 페이지가 새로고침되어 서버로 부터 리소스를 전달받는다.
문제점
정보가 많아짐에 따라 속도적인 부분에 문제가 있다.
서버에서 렌더링을 담당하는 것은 서버 자원이 사용되고 불필요한 트래픽이 낭비된다.

Routing

• 다른 경로(url 주소)에 따라 다른 view를 보여주는 것
• 리액트는 라이브러리이기에 이런기능은 내장되어 있지 않다.

React Router

npm install react-router-dom --save를 통해 설치

package.json - dependencies에 의존하고 있는 라이브러리와 라이브러리의 버젼을 볼 수 있다.
(설치한 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;

Link와 useNavigate

Link를 이용한 Route이동

import React from "react";
import { Link } from "react-router-dom";
//import 받아주고

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

export default Login;

(Dom에서 ,< a>태그로 컴파일 된다. )

useNavigate

import React from "react";
import { useNavigate } from "react-router-dom";
//import로 받아주공

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

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

함수에 useNavigate훅을 통해 페이지 이동가능

클릭 시 바로 이동하는 로직 구현 시에 사용 (사이트 내 탭바 등)

useNavigate

페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 훅을 활용하여 구현합니다.
ex. 로그인 버튼 클릭 시
조건에 따라 메인페이지로 이동하거나, 회원가입 페이지로 이동하거나, 등