우리가 흔히 말하는 "페이지 이동" 이라는 것은 리액트에서 라우터를 통해 처리할 수 있다. 그럼 라우터는 무엇일까
우선 리액트는 SPA (Single Page Application) 방식인데 SPA부터 알아보자
-> React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다.
사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.
이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter이다.
BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지 한다.
HashRouter : 해시주소를 감지한다.
npm install react-router-dom --save
<BrowserRouter>
태그로 컴포넌트 사용하기<BrowserRouter>
태그로 컴포넌트를 감싸주자.<Routes>
, ,<Route>
컴포넌트 사용하기<Routes>
컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우터 단 하나만을 렌더링 시켜주는 역할을 한다.<Route>
는 path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./pages/Login/Login";
import Main from "./pages/Main/Main";
function Router() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Login />} />
<Route path="/main" element={<Main />} />
</Routes>
</BrowserRouter>
);
}
export default Router;
path : 경로
ex)path="/main" 일 경우 3000 port 사용시 주소창에 http://localhost:3000/main 창 접속
element : 컴포넌트
<Link>
컴포넌트 사용하기윂 페이지에선느 원래 링크를 보여줄 때 a태그를 사용한다. 하지만 a태그는 클릭시 페이지를 새로 불러오기때문에 사용하지 않는다.
대신에 Link 컴포넌트를 사용하는데, 생김새는 a태그를 사용하지만, History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.
<Link to = "경로"></Link>
Router v6으로 넘어오면서 새로 생긴 기능이다.
Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 경우, 뒤로가기 등에 사용하는 Hook 이다.
(replace 옵션을 사용하면 페이지를 이동할 때 히스토리를 남기지 않는다.)
Link와의 차이점으로는 useNavigate는 양식이 제출되거나, 특정 이벤트가 발생했을 때, URI를 조작할 수 있는 interface이다.
import React from "react";
import { useNavigate } from "react-router-dom";
function Login() {
const navigate = useNavigate();
const goToMain = () => {
navigate("/main");
};
return (
<div>
<button className="loginBtn" onClick={goToMain}>
로그인
</button>
</div>
);
}
export default Login;
useNavigate
훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다. 반환하는 함수를 navigate
라는 변수에 저장 후 navigate
의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있습니다.Link
와 다른 점은 함수 호출을 통해 페이지를 이동하기 때문에 위와 같이 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있습니다.