React

SPA

SPA(Single Page Application)
어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것.
뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어납니다. 페이지 변경이 일어난다고 보여지는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것입니다.

리액트 프로젝트에서 .html 파일은 하나만 존재합니다.
한 개의 웹페이지(html) 안에서 여러 개의 페이지를 보여주는 방법은 Routing을 이용하는 것입니다.

Routing

라우팅(Routing)이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것입니다.
리액트 자체에는 이러한 기능이 내장되어 있지 않습니다.
하지만 React-router 라이브러리를 이용하여 라우터 기능을 사용할 수 있습니다.

React Router

CRA(Create React App)에서 라우팅을 사용하려면 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.jsf를 수정해야 합니다.
App 컴포넌트 대신에 routing을 설정한 Router 컴포넌트로 변경해야 합니다.

Route 이동하기

1. Link 컴포넌트 사용
2. useNavigate 사용

Link 컴포넌트 사용하는 방법

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

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

export default Login;

• Router.js에서 설정한 path로 이동하는 첫 번째 방법은 Link 컴포넌트를 사용하는 방법입니다.
• react-router-dom에서 제공하는 Link 컴포넌트는 DOM에서 a 태그로 변환(Compile)됩니다.
• cf) JSX - Babel - JavaScript
• a 태그와 마찬가지로 Link 컴포넌트도 지정한 경로로 바로 이동시켜주는 기능을 합니다.
  a 태그 - 외부 사이트로 이동하는 경우
  Link 컴포넌트 - 프로젝트 내에서 페이지 전환하는 경우

useNavagate로 구현하는 방법

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;

• goToMain 함수에서 구현된 것처럼, useNavigate 훅을 통해 페이지 이동할 수 있습니다.
• useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다. 해당 함수를 navigate 라는 변수에 저장합니다.
• 이후, navigate 의 인자로 Router.js 에서 설정한 path를 넘겨주면, 해당 경로로 이동할 수 있습니다.

두 가지 방법의 활용법

1. Link 컴포넌트

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

2. useNavigate

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

Sass

Sass Syntactically Awesome Style Sheets로, CSS 전처리기(Preprocessor)라고도 합니다.
Sass를 사용하면 좀 더 쉽게 CSS를 작성할 수 있습니다.

Nesting

Sass의 가장 기본적인 기능으로 Nesting이라는 것이 있습니다.

/* css */
.main .content{text-align:center;}
.main .content p{text-align:left;}
.main .content span{display:inline-block;}
.main .content .txt p{color:red;}

/* Sass (SCSS) */
.main{
   .content{
      text-align:center;
      p{text-align:left;}
      span{display:inline-block;}
      .txt p{color:red;}
   }
}

이렇게 반복되는 클래스들을 한 번만 작성하여 사용할 수 있습니다.

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

변수

• 반복적으로 사용되는 값을 변수로 지정
• 변수이름 앞에 $추가 ( $변수이름: 속성값; )
• 유효범위는 {} 기준
• 변수가 재할당되면 그 이후에 사용되는 변수는 재할당 된 값으로 사용

연산

• 나누기 연산자는 주의 필요(CSS 단축 속성으로 해석되므로 아래와 같이 사용)
  - 괄호
  - 변수할당 후 사용
  - 다른 연산자와 함께 사용

📍주의사항
- 곱하기(*) : 하나 이상의 값이 반드시 숫자
- 나누기(/) : 오른쪽 값이 반드시 숫자

재활용(mixin)

• 재사용 할 CSS 선언 그룹을 정의하는 기능
• @mixin으로 선언하고 @include로 사용
• 속성은 같으나 값이 다를 경우에는 인수를 사용