리액트에는 SPA 방식을 사용하여 페이지가 하나밖에 없는데 화면전환을 어떻게
하는 것인가 항상 궁금하였다.
페이지를 다시 요청하지 않고 화면전환을 하는 방식은 컴포넌트를 교체하는 방식으로
사용하면 되는 것이었다.
이것을 편리하게 해줄 수 있는 방법이 바로 ReactRouter를 사용하는 방식이다.
해당 라이브러리를 사용하면 편리하게 페이징 라우팅을 할 수 있다.
라이브러리 설치 방법은 다음과 같다.
npm install react-router-dom@6
맨뒤에 붙은 6은 버전을 뜻하는 것이다. 설치가 완료되면 화면 전환을 할 파일에서
라이브러리를 호출하면된다.
import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import RouteTest from "./component/RouteTest";
import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";
function App() {
return (
<BrowserRouter>
<div className="App">
<h2>APP.JS</h2>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/edit" element={<Edit />} />
<Route path="/diary" element={<Diary />} />
</Routes>
<RouteTest />
</div>
</BrowserRouter>
);
}
export default App;
가장 먼저 알아야 하는 것이 바로 BrowserRouter이다.
이것을 가장 최상위 태그에 감싸주는 형식으로 만들어준다. BrowserRouter 안에 있는 것들은 브라우저 url과 매핑될 수 있다.
그 다음 이동할 페이지 컴포넌트를 Routes 태그로 묶어준 후에 연결할 컴포넌트들을 하나씩 Route에 선언 해주고 속성 path에 연결할 라우터 링크, element에는 컴포넌트 태그를 써줌으로써 연결을 할 수 있다.
보통 우리가 MPA 형식의 웹사이트를 이용할 때 페이지를 이동할 때 사용하는 기술로는 a태그가 있을 것이다. a태그를 사용하면 페이지가 이동되지만 다시 페이지를 요청하기 때문에 리엑트의 장점인 SPA형식의 목적에 벗어 나기때문에 a태그는 외부 사이트 요청을 할 때만 사용하고 나머지는 지양한다.
그럼 SPA환경에서 페이지를 이동할 때 사용하는 방법은 어떤 것이 있을까?
react-router-dom 라이브러리에는 Link라는 기술이 있다. 이것을 사용하여 페이지를 이동하면 SPA형식을 사용한 페이지 교체를 할 수 있다.
import { Link } from "react-router-dom";
const RouteTest = () => {
return (
<>
<Link to={"/"}>HOME</Link>
<br />
<Link to={"/diary"}>DIARY</Link>
<br />
<Link to={"/new"}>NEW</Link>
<br />
<Link to={"/edit"}>EDIT</Link>
</>
);
};
export default RouteTest;
Link를 사용하고 내부 속성의 to에 페이지 라우터 주소를 연결해주면 된다.
a 태그의 href와 같다고 생각하면 된다.
이렇게 지정을 해주면 아까 Route태그에서 path로 지정한 경로와 맞는 컴포넌트가 호출이 되면서 페이지가 이동하는 것처럼 컴포넌트가 교체된다.