React Router&SASS(TIL)

이해용·2022년 5월 10일
Sassreact router
0
post-thumbnail

Router

1. SPA

  • SPA (Single Page Application) - 페이지가 한 개인 애플리케이션
  • Westagram-frontend : login.html, main.html - 페이지 수만큼 html 파일이 존재
  • 리액트 프로젝트에서 .html 파일의 개수는? 1개 >>> SPA(Single Page Application)
  • 한 개의 웹페이지(html) 안에서 여러 개의 페이지를 보여주는 방법은? >>> Routing

SPA (Single Page Application)

싱글 페이지 애플리케이션(single-page application, SPA, 스파)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다

2. Routing

  • 라우팅(Routing)이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것 입니다.
  • 리액트 자체에는 이러한 기능이 내장되어있지 않습니다.
  • 리액트가 Framework 가 아닌 Library 로 분류되는 이유
  • React-router 는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리입니다.
  • cf. Third-party Library

Third-party Library 란?

Third-party Library는 컴퓨터 프로그래밍에서 개발 플랫폼의 원래 공급업체가 아닌 다른 주체가 자유롭게 배포하거나 판매하도록 개발된 재사용 가능한 소프트웨어 구성 요소입니다.
많은 프로그래머가 component 지향 개발이 사용자 정의 응용 프로그램 개발의 효율성과 품질을 향상시킨다고 믿기 때문에 타사 소프트웨어 구성 요소 시장이 번창합니다.
일반적인 타사 소프트웨어에는 매크로, 봇 및 소프트웨어가 포함됩니다.

3. React Router

Create React App(CRA)에 특별히 routing을 위한 로직이 들어있지 않기 때문에, 가장 인기 있는 routing solution인 react-router 를 추가하여 rounting 을 구현합니다.

3-1. react-router 설치

npm install react-router-dom --save

3-2. Router 컴포넌트 구현하기

<Route path="/" element={<Login />} ⇒ 다른 js 파일의 경로를 열어주는 태그안의 요소 (path="/"는 react의 localhost.3000/ 뒤에 나오는 경로)

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;

3-3. index.js

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

  • 현재 화면에는 <App /> 컴포넌트가 보여지고 있습니다. (또는 Login 컴포넌트, Main 컴포넌트)
  • CRA로 만든 앱에 routing 기능을 적용하려면 index.js 를 수정해야 합니다.
  • <App /> 컴포넌트 대신에 routing을 설정한 컴포넌트(<Router />)로 변경해야 합니다.

3-4. Route 이동하기

Route 이동하는 방법은 두 가지가 있습니다.

  1. <Link> 컴포넌트 사용하는 방법
  2. useNavigate 로 구현하는 방법
import React from "react";
import { Link } from "react-router-dom";

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

export default Login;

3-4-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 /> 를 사용하지 않고 함수 호출을 통해 페이지를 이동하는 방법도 있습니다.
  • goToMain 함수에서 구현된 것처럼, useNavigate 훅을 통해 페이지 이동할 수 있습니다.
  • useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다. 해당 함수를 navigate 라는 변수에 저장합니다.
  • 이후, navigate 의 인자로 Router.js 에서 설정한 path를 넘겨주면, 해당 경로로 이동할 수 있습니다.

3-4-3. 두 가지 방법의 활용법

  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

먼저 CSS 전처리기란?

CSS 전처리기는 전처리기의 자신만의 특별한 syntax (en-US)를 가지고 CSS를 생성하도록 하는 프로그램입니다. 선택할 수 있는 많은 CSS 전처기가 있습니다. 그러나 대부분의 CSS 전처리기는 pure CSS에 존재하지 않는 특징을 추가할것 입니다, 믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(inheritance selector), 기타 등등. 이러한 특징은 CSS 구조를 가독성있고 더 유지보수 하기 좋게 합니다.

가장 일반적인 CSS 전처리기들은 SASS, LESS, Stylus, PostCSS 입니다.

SASS란?

Sass는 종속형 시트(CSS)로 해석 및 컴파일되는 스크립트 언어이다. SassScript는 그 자체로 스크립트 언어이다. Sass는 2가지 신택스로 구성되어 있다. 인덴티드 신택스(indented syntax)라는 이름의 원래의 신택스는 Haml과 비슷한 신택스를 사용한다.[4] 규칙 분리를 위해 들여쓰기를 사용하여 코드 블록과 새줄 문자를 구분한다. 새로운 신택스 "SCSS"는 CSS의 것과 비슷한 블록 형식을 사용한다. 블록 안의 줄을 구분하기 위해 괄호를 사용하여 코드 블록과 세미콜론을 인지한다. 인덴티드 신택스와 SCSS 파일들은 전통적으로 각각 .sass, .scss 확장자를 가진다.

1. 설치

npm install sass --save

  • 설치 시 node-modules 폴더에 sass 폴더가 생성됩니다. (package source code)
  • -save : package.json에 설치된 패키지의 이름과 버전 정보를 업데이트
  // package.json
{
  "name": "westagram-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  }
}

2. .css 파일의 확장자 .scss로 바꾸기

3. Nesting 기능 적용하기

Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있습니다. JSX 최상위 요소의 'className'을 컴포넌트 이름과 동일하게 설정해주고, '.scss' 파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있도록 해주세요. 

  nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

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

=>

  nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

      li {
        display: inline-block;
      }
    }

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

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

  .login-container {
  display: flex;
  justify-content: center;
  align-items: center
}

button {
  width: 200px;
  height: 100px;
  background-color: blue;
}

button:hover {
  background-color: red;
  cursor: pointer; 
}
 
input {
  background-color: blue;
}

input:focus {
  background-color: red;
}

=>

$theme-color: 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;
    }
  }
}

참고 및 출처
위코드 강의
https://ko.wikipedia.org/wiki/%EC%8B%B1%EA%B8%80_%ED%8E%98%EC%9D%B4%EC%A7%80_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98
https://en.wikipedia.org/wiki/Third-party_software_component https://ko.wikipedia.org/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)
https://sass-lang.com/ https://developer.mozilla.org/ko/docs/Glossary/CSS_preprocessor

profile
이해용
프론트엔드 개발자입니다.
이전 포스트

code-kata(Week1 - Day1)(TIL)

다음 포스트

code-kata(Week1 - Day2)(TIL)

0개의 댓글