규모가 커질수록 사용자와의 상호작용이 많아지고 속도 저하 문제가 발생함에 따라 이 문제를 해결하기 위해 등장한 SPA
웹페이지의 레이아웃과 UI 요소 등에 대한 뼈대
디자인 전단계에서 선(wire)을 이용해 윤곽선을 잡는 것
페이지 만들기 전에 어떤 컴포넌트를 만들고 어떻게 조합해야할지 구상해야함
화면에 따라 주소가 달라지고 그에 따른 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다"라고 함 => 라우팅(Routing)
router | route matchers | route changers |
---|---|---|
<BrowserRouter> | <Routes> <Route> | <Link> |
<BrowserRouter>
: 라우터 역할을 함
<Routes>
, <Route>
: 경로를 매칭해 줌
<Link>
: 경로를 변경하는 역할
import {BrowserRouter, Routes, Route, Link} from "react-router-dom";
# simpleroute 폴더에 React App 설치#
npx create-react-app simpleroute
cd simpleroute
# react-router 라이브러리 설치#
npm install react-router-dom@^6.3.0
import React from "react":
import {BrowserRouter, Routes, Route, Link} from "react-router-dom";
export default function App() {
return (...)
}