BrowserRouter
- React Router v6 이전부터 사용되어 온 방식으로, 선언적으고 간단한 설정을 제공
- 애플리케이션의 루트 컴포넌트로 설정하며, 내부에서
<Routes>,<Route>를 통해 라우팅 구조를 정의
RouterProvider
- React Router v6.4 이상에서 도입된 방식으로, 라우팅을 더 유연하고 동적으로 설정할 수 있도록 설계
- createBrowserRouter와 함께 사용되며, 데이터 로딩, 에러 핸들링, 동적 라우팅 설정 등이 포함된 라우트 객체 기반의 라우팅을 제공
- 라우팅 설정이 객체 기반으로 변경되며, 데이터 로드와 에러 처리 기능이 포함 ➡️ 라우팅 정보를 객체 형태로
Link 컴포넌트
Link 컴포넌트 ➡️ 클릭하면 다른 주소로 이동시켜주는 컴포넌트
SPA에서 부드러운 화면 전환을 위해 사용
HTML5 Histroy API를 사용해 브라우저의 주소만 바꿀 뿐 페이지를 새로 불러오지는 않음
<Link to="경로">링크 이름</Link>
-
기존 a 태그 사용 시
<a href='/home'>HOME</a>
페이지 이동마다 새로고침 발생
state값이 모두 날아가고 초기 렌더링 다시 진행 -
React-Router-Dom의 Link 사용 시
<Link to="/hone">HOME</Link>
새로고침 없이 어플리케이션 유지하며 페이지의 주소 변경
동적라우팅
URL 경로 값에 따라 렌더링될 데이터가 동적으로 결정되는 것
useParams
파라미터 이름은 라우트를 설정할 때 Route 컴포넌트의 path props에 :파라미터이름 형식으로 설정
파라미터 조회는 useParams 훅 함수를 이용해 객체 형태로 조회
const params = useParams(); : 주소에 포함된 파라미터를 추출
const profile = users[params.userid]; : 파라미터에서 userid의 값을 추출해서 users 객체에서 일치하는 사용자 정보 가져옴
App.js에 Route 추가
<Route path="/profile/:userid" element={<Profile />} />쿼리스트링
경로에 동적인 값을 전달할 때 사용
ex) ?name=hong&age=23
- 쿼리스트링은 Route 컴포넌트에 추가 설정 없이 사용 가능
- 쿼리스트링은 useLocation 훅 함수가 반환하는 location 객체의 search 항목을 활용하여 추출
useLocation 훅 함수 ➡️ 📦 location 객체 📦를 반환
pathname: 현재 주소의 경로(쿼리스트링 제외)search: ?문자를 포함한 쿼리스트링 값hash: 주소의 #문자열 뒤의 값state: 페이지로 이동할 때 임의로 넣을 수 있는 상태 값key: location 객체의 고유 값
useSearchParams 훅 함수
const [searchParams,setSearchParams]=useSearchParams();searchParams : 쿼리 파라미터를 조회하거나 수정하는 메서드들이 담긴 객체 반환
- get 메서드를 통해 특정 쿼리 파라미터 조회
- set 메서드를 통해 특정 쿼리 파라미터 업데이트
- 조회 시 쿼리파라미터 존재하지 않는다면 null 반환
setSearchParams : 쿼리 파라미터를 객체 형태로 업데이트할 수 있는 함수를 반환
qs 라이브러리 ➡️ 쿼리스트링 파싱을 도와주는 라이브러리
const location=useLocation()
const queries = qs.parse(location.search,{ignoreQueryPrefix:true});ignoreQueryPrefix :true이면 '?'를 파싱에서 제외함
useSearchParams 훅을 사용하도록 About 컴포넌트를 수정
useSearchParams을 쓰면 파싱 하지 않아도됨 그냥 get해오면 됨
서브라우트 = 중첩 라우트
복잡한 어플리케이션의 URL과 화면 계층을 효과적으로 관리
Outlet과 children 속성을 활용해 계층 구조를 반영한 라우팅을 설정
- 특정 라우트의 하위 경로로 구성된 라우트
- 부모라우트의 레이아웃을 공유하면서 자식 컴포넌트를 렌더링할 때
App.js 파일에 Profile 컴포넌트와 관련된 Link와 Route를 제거하고, Profiles 컴포넌트와 관련된 Link와 Route를 추가
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/info" element={<About />} />
{/*
<Route path="/profile/:userid" element={<Profile />} />
*/}
<Route path="/profiles" element={<Profiles />}>
<Route path=":userid" element={<Profile />} />
</Route>
</Routes>
공통레이아웃 컴포넌트
중첩된 라우트와 Outlet컴포넌트를 이용해 각 페이지(컴포넌트)에서 공통적으로 보여줘야 하는 레이아웃을 처리할 때 유용
Layout.jsx ⇒ 메뉴를 <header> 태그 안에 포함하고, 각 메뉴를 클릭했을 때 나타낼 컴포넌트는 <main> 태그에 출력
export default function Layout() {
return (
<div>
<header>
<ul>
<li><Link to="/">홈</Link></li>
<li><Link to="/about">소개</Link></li>
<li><Link to="/info">정보</Link></li>
<li><Link to="/profiles">프로파일</Link></li>
</ul>
</header>
<main>
<Outlet />
</main>
</div>
);
};
<Outlet/>: 자식컴포넌트가 표시될 위치
App.jsx 수정 ⇒ 메뉴를 제거하고, Layout 컴포넌트로 각 페이지 컴포넌트를 둘러쌈
- 기존 코드 :
<ul>태그 안에 메뉴가 작성되어 있음
- 수정 후 코드 : ⭐️
<Layout>컴포넌트로 둘러싸야 서브라우팅이 됨
useNavigate 훅
Link 컴포넌트를 사용하지 않고 페이지를 이동할 때 사용하는 훅 함수
const navigate = useNavigate();
<button onClick={() => navigate(-1)}>이전 페이지로 이동</button>
<button onClick={() => navigate("/info")}>정보 페이지로 이동</button>
NavLink 컴포넌트
링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트
- style 또는 className을 설정할 때
{ isActive: boolean }을 매개변수로 전달받는 함수를 정의할 수 있음
현재경로가 /about(소개 컴포넌트) 이면 isActive가 true가 됨
<li><NavLink to="/about" style={
({ isActive }) => isActive ? { color:"red" } : undefined}>소개
</NavLink>
</li>Not Found 페이지
- Route 컴포넌트의
path props값으로*를 사용하면 아무 텍스트나 매칭한다는 뜻- 라우트 엘리먼트의 상단에 위치하는 라우트의 규칙을 모두 확인하고, 일치하는 라우트가 없다면 이 라우트가 화면에 나타나게 됨
NotFound 컴포넌트 만들고 라우트 설정
<Route path="*" element={<NotFound />} />
Navigate 컴포넌트
- 컴포넌트를 화면에 보여주는 순간 다른 컴포넌트(페이지)로 이동할 때 사용
- 페이지를 리다이렉트할 때 사용
마이페이지 컴포넌트 생성
import { Navigate } from "react-router-dom";
export default () => {
const isLoggedIn = false;
if (!isLoggedIn) {
return <Navigate to="/login" replace={true} />;
}
return <h1>마이 페이지</h1>;
}
로그인되어있지 않으면 로그인페이지로 이동, 로그인된 경우만 마이페이지 보여줌
<Navigate to="/login" replace={true} />
프로파일에서 마이페이지로 이동하면 히스토리에 다음과 같이 기록
➡️ /profile → /login
/mypage가 기록되지 않음!
'이전 페이지로 이동'을 클릭하면 `/profile` 프로파일 페이지가 보여짐
<Navigate to="/login" replace={false} />
프로파일에서 마이페이지로 이동하면 히스토리에 다음과 같이 기록
➡️ /profile → /mypage → /login
'이전 페이지로 이동'을 클릭하면 ⇒ /mypage → /login ⇐ 계속해서 로그인 페이지가 보여짐
