[React] Router, Sass

SPA ❓

Single Page Application = 페이지가 한 개인 애플리케이션

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

Rounting ⁉️

Rounting 이란 다른 경로 (url 주소) 에 따라 다른 View (화면) 을 보여주는 것

• 리액트 자체에 내장되어 있지는 않음 (React 가 프레임 워크가 아닌 라이브러리인 이유.

npm install react-routerdom --save 을 설치해야함

`
import { BrowserRouter, Routes, Route } form "react-router-dom";

function Router() {
return (

    	<Nav />
        <Routes>
        	<Route path="/" element={<Login />} />     --- entry point (시작 페이지) (경로에 들어오면 보여질 페이지)
            <Route path="/signup" element={<Signup />} /> 
            <Route path="/main" element={<Main />} />
           </Routes>
           <Footer />
      </BrowserRouter />
      );

}

default 파일을 가져오는 법 === import Login from '/.../;
named 파일을 가져오는 법 === import { Main } from '/.../';

<Link> 태그를 이용해서 경로를 이동하는 것과 <a> 태그를 이용해서 경로를 이동하는 것의 차이

• Link 는 같은 애플리케이션 내에서의 이동할 때 사용하고, a 태그는 외부 URL 로 이동할 때 사용

SCSS ‼️

• 스타일링을 편하게 할 수 있게 해주는 CSS 전처리기 (--- 전에 처리하는)
• npm install sass --save 설치 시 node-modules 폴더에 sass 폴더가 생성됨
• --save : package.json 에 설치된 패키지 이름과 버전 정보를 업데이트
• .scss 라는 확장자를 가짐
• nesting 기능 적용하기 -> JSX 의 최상위 요소의 className 을 컴포넌트 이름과 동일하게 지정하고, 그 하위 요소들의 스타일 속성을 정의해주는 것

@mixin

✔️ 컴파일을 하기 위해서 사용하는 sass 문법
✔️ 연관성이 없는 반복 되는 규칙을 따로 만들어서 사용 (연관성 없는 클래스에 단순하게 같은 속성을 부여하기 위함)
✔️ 소스코드의 중복을 막기 위해 사용

@extend

✔️ 연관성 있는 반복 되는 규칙을 만들어서 사용 (선택자 간의 연관성이 존재할 때 사용)

.btn {
width: 100px;
height: 80px;
}

.btn_success {
@extend .btn;
color: green;
}

.btn_danger {
@extend .btn;
color: red;
}

%placeholder

✔️ extend 처럼 작성할 경우 연관성 있는 선택자를 묶을 수 있지만,
🔹 불필요한 .btn 선택자가 생기는 것을 막고 싶을 때 사용하면 된다.

%btn {
width: 100px;
height: 80px;
}

.btn_success {
@extend %btn;
color: green;
}