우리가 흔히 말하는 "페이지 이동" 이라는 것은 리액트에서 라우터를 통해 처리할 수 있다. 그럼 라우터는 무엇일까
우선 리액트는 SPA (Single Page Application) 방식인데 SPA부터 알아보자
SPA란?
- 기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다.
- 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.
-> React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다.
라우팅이란?
- 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다.
- 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다.
리액트 라우터(React Router)
-
사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.
-
이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter이다.
BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지 한다.
HashRouter : 해시주소를 감지한다.
리액트 라우터 사용하기
- 설치
- npm
npm install react-router-dom --save<BrowserRouter>태그로 컴포넌트 사용하기
- BrowserRouter를 사용 할 것이기 때문에,
<BrowserRouter>태그로 컴포넌트를 감싸주자. - Header는 모든 URL에 공통 적용할 Component로 최상단에 위치 할 예정이다.
<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>- import {Link} from 'react-router-dom';
useNavigate
Router v6으로 넘어오면서 새로 생긴 기능이다.
Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 경우, 뒤로가기 등에 사용하는 Hook 이다.
(replace 옵션을 사용하면 페이지를 이동할 때 히스토리를 남기지 않는다.)
Link와의 차이점으로는 useNavigate는 양식이 제출되거나, 특정 이벤트가 발생했을 때, URI를 조작할 수 있는 interface이다.
useNavigate 사용하기
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와 다른 점은 함수 호출을 통해 페이지를 이동하기 때문에 위와 같이 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있습니다.
