TIL :: [React] React Router, Sass

학습목표

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

 

1. SPA가 무엇인지 설명할 수 있다.

* spa란?(싱글 페이지 어플리케이션)

: 멀티플 페이지가 아닌 싱글 페이지이다.

 

2. react-router-dom를 이용해 Router Component를 구현할 수 있다.

* react-router 란?

: 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리이다.

 

* Routing(라우팅) 이란?

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

 

페이지 이동에 있어서, 화면을 전환하는 기능을 구현할 수 있게 해주는 도구가 react router 이다.

그리고 주소(url)로 이동을 하기 위해 필요한 도구 이다.

라우터를 이용해서 주소와 주소를 맵핑시키는 것을 알려준다.

 

react-router를 통해 SPA(싱글페이지 애플리케이션)가 화면이동을 하는것 처럼 할 수 있다.

router를 이용해 로그인페이지와 메인페이지를 왔다갔다하게 만들 수 있다.

*react-router 설치 :
npm install react-router-dom --save

Router Component 를 구현할 수 있다

의 의미는  Router Component(=폴더)를 만들어라!  Router.js 

주소와 연결되어있는 컨포넌트가 있어야한다. 그래야만 해당 주소로 들어갔을때 , 컴포넌트에서 정의한 화면이 보이게 만들어준다.

 

 

Router 컴포넌트 구현방법 예시

import React from "react"; //해당 파일이 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 />} />
        
        //위의 내용은 Route가 리턴이되어 브라우저 상에 보이게 되는 것을 의미한다.
        
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default Router;

 

3. react-router-dom에서 Routing을 하는 방법 2가지와 차이점에 대해 설명할 수 있다.

    ** <a> 태그 대신 써야할 것들

1. <Link> 컴포넌트 사용하는 방법 
2. useNavigate 로 구현하는 방법 

 

1. <Link> 컴포넌트 사용하는 방법 

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

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

export default Login;

• <a> - 외부 사이트로 이동하는 경우
• <Link /> - 프로젝트 내에서 페이지 전환하는 경우

• 클릭 시 바로 이동하는 로직 구현 시에 사용합니다.
• ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동

 

2. useNavigate 로 구현하는 방법 

 

useNavigate는 해당 컴포넌트에서 네비게이션(=라우팅)을 도와주는 하나의 프로그래밍적인 장치이다.

 

<button> 에서 onclick 을 맵핑 시키고, onclick 안에 goToMain이라는 함수가 있고, 

<button className="loginBtn" onClick={goToMain}>

goToMain이라는 함수 안에 위에 있던 navigate 함수를 써서 navigate("/main")으로 라우팅을 시키고 있다.

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

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

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;

• 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 훅을 활용하여 구현합니다.
• ex. 로그인 버튼 클릭 시
  • Backend API로 데이터(User Info) 전송
  • User Data 인증 / 인가
  • response message
  • Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
  • Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동

 

* 차이점 

<Link>는 클릭하면 이동하는것만 가능.

useNavigate 의 navigate의 함수 navigate("/main") 는 어디서든 쓰일 수 있다. (포괄적인 태그에 이벤트를 걸 수 있다.)

 

함수적으로, 프로그래밍 적으로 이동을 하려면 useNavigate를 쓰고

구조적으로 클릭했을때 단순한 이동을 원한다면 Link 태그를 사용하면 된다.

 

 

4. <Link> Component 와 <a> tag 의 차이점에 대해 설명할 수 있다.

• <a> tag : 문서와 문서를 연결할 때 사용

하지만, SPA는 문서와 문서를 연결할 필요가 없다. SPA는 하나의 페이지 안에서 다보여주기 때문에!

결론! SPA의 내부페이지에서는 <a> tag를 사용하면 안된다.

 

 

5. css 전처리기의 역할에 대해 설명할 수 있다.

전처리(Preprocessor) ??

: 말그대로 전에 처리해준다는 뜻!

최종적으로 css가 나오게 하기 위해, 그 전에 처리할 수 있는것 들을 정의해 놓는 것!

 

 

6. sass에서 제공하는 문법을 이용하여 css파일을 scss파일로 변환할 수 있다.

*sass 설치 :
npm install sass --save

• css 파일명을  .scss로 바꾸기!
• Nesting 기능 적용하기

• 변수 활용, & 연산자, mixin 등 기본 기능 적용하기