SPA
SPA란?
Single Page Application의 약자로 페이지가 1개인 어플리케이션이라는 뜻.
이전에는 유저가 요청할때마다 페이지가 새로고침되며, 페이지를 로딩할때마다 서버로부터 리소스를 전달받아 해석한후 렌더링하고 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당했었음.
요즘은 웹에서 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 있어, 이를 해결하기위해 캐싱과 압축을 하여 서비스를 제공함.
싱글페이지라고 해서 한종류의 화면만 있는것이 아니라 각 화면에 따라 주소를 만들어서 주소에 따라 다른 뷰를 보여주는것을 라우팅이라고 함.
리액트 자체에는 이러한 기능이 내장되어있지 않아, 리액트가 라이브러리로 분류됨.
리액트 라우터는 써드파티 라이브러리로서,공식은 아니지만 클라이언트사이드에서 이루어지는 라우팅을 간단하게 해주고 렌더링을 도와주는 도구들도 사용할수 있게 됨.
웹 어플리케이션을 만들게 된다면 필수 라이브러리임.
SPA 단점
앱의 규모가 커지면서 자바스크립트의 파일사이즈가 너무 커진다는점입니다.
나중에 Code Splitting을 사용하면 트래픽과 로딩속도를 개선할수있음.
Router
Routing이란?
다른경로(URL 주소)에 따라 다른 뷰(화면)를 보여주는것
Router
- 라우터 파일구성하기
-
src 파일 내에 Router.js 를 만들어주기
-
파일내에서 import React from ‘react’
-
import {BrowserRouter, Routes ,Route } from “react-router-dom”
-
import Login from “로그인 파일 위치”
-
import Main from “메인 파일 위치”
-
import Nav from “네브 파일 위치”
-
import Footer from “푸터 파일 위치”
-
밑에다 아래 코드 작성.
const Router = () ⇒ { return ( <BrowserRouter> 최상위 묶어주는 태그 <Nav /> <Routes> 두번째 묶어주는 태그 <Route path=”/”element={<Login />} /> // "/" 한개의 의미는 처음 키자마자 나오는 페이지를 말함. <Route path=”/main” elemet={<Main />} /> </Routes> <Footer /> </BrowserRouter> ) // 이 전체가 페이지 구조라고 생각하면 편함 }이렇게 해주고 index.js에 Router를 렌더에 넣어주면됨.
-
- Route 이동하기
- Link를 이용한 이동법 import { Link } from ‘react-router-dom’
이렇게 만들어주면 버튼텍스트를 클릭하면 /main 페이지로 이동함.<Link to=”/main”><h1>버튼</h1></Link>
우리가 Link를 생성하면 전처리할때 a링크로 변경됨.
Link는 프로젝트 내에서 페이지가 전환되는경우에 사용
a는 외부사이트를 이동할때 사용
a를 사용하게 되면 페이지를 다시 로딩하기때문!!
- useNavigate를 이용한 이동 import { useNavigate } from ‘react-router-dom’
const navigate = useNavigate()를 설정해주고
navigate(’이동하고싶은위치’)를 넣어주면됨.
버튼에 onClick 속성에 넣어주면 이동가능.
Link와는 다르게 함수식을 사용하기때문에 조건을 넣어줄수있다!
- Link를 이용한 이동법 import { Link } from ‘react-router-dom’
- 주의할점
가져올 파일이 default되지않은 파일에서 가져오려면 {}중괄호로 묶어서 가져와야함, 한개만 가져오려고 해도 꼭 묶어줘야 가져올수있습니다!!import {상수명, 상수명} from 'react-router-dom'
Sass
CSS의 전처리기로 우리가 JSX표현식을 써도 바벨이 HTML형식으로 바꿔주는것과 같은 원리이다.
확장자를 scss로 바꿔주어야함. (style.scss)
-
Nesting을 활용하여 코드 가독성 높히기
body { color:red; } body h1 { color:blue; } body h1 p { color:skyblue; } body { color:red; h1 { color:blue; p { color: skyblue; } } } 중복되는 코드를 한번만 칠수있게끔 만들어준다! -
CSS처럼 root 설정하기 ($를 이용하여 넣을수있음)
$theme-color: #FFFFFF; body { background-color: $theme-color; } -
@mixin 기능을 사용하여 자주 쓰이는 문장 묶기
@mixin flex-center { display: flex; justify-content: center; align-items: center; } //이렇게 하나에 정리해두고 body { @include flex-center; } //이렇게 필요할때마다 호출해서 쓸수있다! @mixin flex($justify : center, $align : center) { display: flex; justify-content: $justify; align-items: $align; } body { @include flex($justify : flex-start) } //이렇게 쓰게되면 display: flex; justify-content: $justify;(flex-start) align-items: $align; (상단에 정의한 기본값 center가 들어감)
