🎈 라우팅
사용자가 요청한 url에 맞는 페이지를 보여주는 것
react는 SPA 방식이므로, url이 바뀐다고 해서 전체 페이지가 reload 되지 않는다. react-router-dom 은 url 변경 시 필요한 부분만 리랜더링해준다.
🎈 react router dom 설치
npm install react-router-dom
yarn add react-router-dom🎈 기본 사용방법
import { BrowserRouter, Routes, Route } from 'react-router-dom';
...
function App() {
return (
<BrowserRouter>
<Routers>
<Route path="/" element={<MainPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/products/:id" element={<ProductsPage />} />
</Routers>
</BrowserRouter>
)
BrowserRouter: History API를 사용하여 URL을 감지하고 그에 맞는 페이지를 보여준다.Routes:Route컴포넌트 중 규칙이 일치하는 Route를 렌더링한다.Route: Route를 만들고 path와 element를 지정한다.
🔰 Link
a태그와 유사하게 사용하지만, History API를 이용해 클릭 시 SPA 방식에 맞게 로딩된다.
import { Link } from 'react-router-dom';
<Link to="/login">로그인</Link>🔰 useNavigate
특정 이벤트나 함수가 실행됐을 때 페이지가 이동하도록 하고싶거나,
이동한 페이지로 데이터를 전달할때 사용한다.
...
import { useNavigate } from 'react-router-dom';
const Component = () => {
const navigate = useNavigate() // useNavigate 호출
const LoginOnClick = () => {
// 특정 path 로 이동
navigate('/somePage')
}
const PrevOnClick = () => {
// 뒤로가기 (+1 : 앞으로가기)
navigate(-1)
}
const SubmitOnClick = () => {
// 데이터 전달
navigate('/newPage', { state: { 키1: 값1, 키2: 값2 } })
}
...
}🔰 useLocation
useNavigate로 전달받은 데이터를 새 페이지 컴포넌트에서 사용
import { useLocation } from "react-router";
const Component = () => {
const { state } = useLocation();
...
}- useLocation의 메서드
pathname: 현재 주소의 경로 (쿼리스트링 제외)search: 맨 앞의 ? 문자 포함한 쿼리스트링 값hash: 주소의 # 문자열 뒤의 값 (주로 History API 가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용합니다.)state: 페이지로 이동할때 임의로 넣을 수 있는 상태 값key: location 객체의 고유 값, 초기에는 default 이며 페이지가 변경될때마다 고유의 값이 생성됨
🔰 useParams
path에 파라미터가 포함되어 있을 때,
useParams 를 이용해 url로부터 파라미터의 값을 가져온다.
import { useParams } from "react-router";
const App = () => {
return (
...
<Route path="/products/:id" element={<Product />}/>
...
)
}
const Product = () => {
const { id } = useParams();
...
}
/products/1 페이지에 접속하면 <Product/> 컴포넌트는 id 값으로 0을 얻게된다.
🔰 useSearchParams
쿼리 스트링이 포함된 url 에서 파라미터를 불러올 수 있다.
현재 페이지의 url이 /products/1?categoryId=10&detail=true 일 때
const Component = () => {
const [searchParams, setSearchParams] = useSearchParams();
// 쿼리 파라미터 값 조회
const categoryId = searchParams.get('categoryId')
// 쿼리 파라미터 값 조회
const detail = searchParams.get('detail')
const btnOnClick = () => {
// 쿼리 파라미터 값 업데이트, 문자열 타입만 가능
searchParams.set('detail', 'false')
}
}🎈 Route Authentication (접근 권한 부여)
특정 위치로 접근했을 때, 접속자의 권한에 따라 동작을 다르게 줄 수 있다.
/* auth/PrivateRoute.jsx */
...
import { Outlet, Navigate } from "react-router-dom";
const PrivateRoute = () => {
// 접속자 권한 체크
const loginState = useSelector((state) => state.login);
return loginState.islogin
? <Outlet />
: <Navigate to="/login" />;
};<Outlet /> 컴포넌트는 PrivateRoute 의 자식 Route들을 가져와서 url에 맞는 컴포넌트를 렌더한다. (children props 같은 역할)
<Navigate /> 컴포넌트는 렌더링되면 현재 위치를 이동시킨다.
/* App.js */
...
const App = () => {
return (
<Routes>
<Route path="/" element={<MainPage />} />
<Route element={<PrivateRoute />}>
<Route path="/cart" element={<CartPage />} />
<Route path="/order" element={<OrderPage />} />
<Route />
</Routes>
)
}