[JUSTCODE] Basic Foundation - React Router, Saas

SPA(Single Page Application)

리액트 프로젝트에서 html의 파일 수는 한 개이다.

SPA는 페이지가 한 개인 어플리케이션을 의미한다.

 

Router

위에서 설명한 SPA로 여러 페이지를 보여줄 수 있도록 사용하는 것.

React 자체에는 이런 기능이 없기 때문에 Framework이 아니라 Library로 분류된다.

 

설치방법

npm install react-router-dom --save

 

컴포넌트 구현 방법

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의 default 컴포넌트 <App/> 대신에 <Router />를 써줘야한다.

 

이동

Route의 이동방법은 <Link/>와 useNavigate 두 가지가 있다.

 

<Link/>

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

function Login() {
  return (
    <div>
      <Link to="/main">메인</Link>
    </div>
  );
}

export default Login;

지정한 경로로 바로 이동할 수 있도록 한다.

<a> 태그와의 차이는 <a>태그는 외부 링크로 이동하지만, <Link/>태그는  내부 페이지로 이동한다는 것이다.

 

useNavigate

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

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

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

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

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

export default Login;

Hooks를 통해서 페이지를 이동할 수 있다.

보통 이동하기 전, 어떠한 로직을 처리하여야 하는 경우 사용한다.

 

Sass

css를 보다 효율적으로 다루기 위해 만들어진 스타일 시트, Syntactically Awesome Style Sheets.

 

설치방법

npm install sass --save

 

설치 후, Sass를 사용하려면 .css 파일을 .scss로 변경해야한다. 

 

Nesting

css의 상위 요소안에 하위 요소를 적용하는 방법

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
		li {
			display: inline-block;
		}
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

상위 요소와의 스타일 적용의 중첩을 피할 수 있다.

 

mixin

$theme-color: light-blue;
$border-style: 1px black solid;

@mixin flex-center {
	display: flex;
	justify-content: center;
  align-items: center
}

login-container {
  @include flex-center;

	button {
	  width: 200px;
		height: 100px;
		background-color: $theme-color;

		&:hover {
			background-color: red;
			cursor: pointer;
		}
	}

	input {
		background-color: $theme-color;

		&:focus {
		  background-color: red;
		}
	}
}

 

이 외에도 Sass에는 다양한 문법이 존재하며, 아래 Sass 공식 홈페이지에서 확인할 수 있다.

https://sass-lang.com/