[React] Router

Router

a 태그의 문제점

• 해당하는 HTML 새로 로드 → 깜빡임 현상 발생
• React는 SPA (하나의 HTML)
• 컴포넌트 조건부 렌더링 : 새로고침 시 최초 렌더링된 메인으로 이동 → 특정 url 접속 불가
  
• 외부 링크로 이동시에는 <a> 태그 필요

Router

• Routing : 사용자가 요청한 URL에 따라 알맞은 페이지 표시
• React 자체적으로 router 기능 포함 X
• 라이브러리 필요 React Router

React Router 핵심

• 히스토리 스택 구독 및 관리
• route 와 URL 매칭
• route 매칭된 것으로부터 중첩된 UI 렌더링

Router Components 종류

1. BrowserRouter
2. HashRouter
3. MemoryRouter
4. NativeRouter

…

react-router-dom

설치

$ yarn add react-router-dom

라우터 모듈

• BrowserRouter
  • History 객체 생성
  • 웹 브라우저에서 react-router 동작 도와주는 인터페이스
  • 컴포넌트 최상단에 위치
• Route
  • location url에 따라 다른 element 렌더링
  • element
  • path 현재 path === 현재 url → element 속성으로 주어진 값 렌더링
• Routes
  • Route는 Routes 내부에서만 유효
  • location 변경시 Routes 탐색
  • path에 맞는 Route 하나만 렌더링

import { BrowserRouter, Route, Routes } from "react-router-dom";
function App() {
	return (
		<>
			<BrowserRouter>
				<Routes>
					<Route path="/" element={<Home />} />
					<Route path="/login" element={<Login />} />
				</Routes>
			</BrowserRouter>
		</>
	);
}
export default App;

Params

• 주소 path에 동적인 값을 넣는 형태

  <Route path="/post/:postId" element={} />
  <Route path="/post/:author/:postId" element={} />

페이지 간 이동

Link

• 다른 주소로 이동시켜주는 컴포넌트
• import { Link } from 'react-router-dom';

  <Link to="/post">포스트 목록 보러가기</Link>

• relative

  • route 기본값, 계층 구조

  • path 상대 경로로 표현 가능 → . .. 가능

    <Link to=".." relative="path"> ... </Link>

• preventScrollReset

  • 링크 클릭시 스크롤 위치 재설정 방지

    <Link to="/" preventScrollReset={true}> ... </Link>

• replace
  • false 기본값
  • true 해당 주소로 이동 후, 직전 path로 뒤로가기 불가능
• state

  • 값 넘겨주기

    <Link to="/post/detail" state={{postId : 2}}> ... </Link>

• reloadDocument
  • <a> 태그처럼 동작

useLocation()

• 현재 URL에 담긴 정보들 객체로 반환
• const location = useLocation();
• ex. pathname, state, search

useNavigate()

• 클릭 시 페이지 이동 X, 특정 이벤트 실행시 이동

import { useNavigae } from "react-router-dom";
const navigate = useNavigate();   // 함수 반환
navigate("/");
navigate(-1);   // 뒤로 가기
navigate(1);    // 앞으로 가기
navigate("/", { replace: true });   // 뒤로가기 막기
navigate("/new-route", { state: { key: "value" }});

useParams()

• 파라미터값 가져오는 훅
• Read-only

중첩 라우팅

• 서브 페이지 생성

<Route path="/post" element={<PostList />}>
		<Route path=":postId" element={<PostDetail />} />
</Route>

Outlet

• 중첩 라우팅에서 서브 페이지 컴포넌트를 렌더링하는 방법
• children 같은 효과
• import { Outlet } from "react-router-dom";

function App() {
	return (
		<BrowserRouter>
			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="about" element={<About />}>
					<Route path="team" element={<Team />}/>
				</Route>
			</Routes>
		</BrowserRouter>
	);
}

function About() {
	return (
		<>
			<nav>
				<Link to="team">Meet the Team</Link>
			</nav>
			<Outlet />
		</>
	);
}

• Link 통해 /about/team 경로로 이동
• About 컴포넌트 그대로 유지되면서 Outlet 위치에 Team 컴포넌트 렌더링
• <Outlet /> 없으면 /about/team 으로 변경되어도 Team 렌더링 X

Query String

• 요청하는 URL에 부가정보 포함할 때 사용
• ex. 검색, 필터링, 페이지네이션
• ? 기준으로 key, value 쌍 /post/detail?postId=21&author=jnary

useSearchParams()

• url에서 쿼리값 가져오는 훅
• read, write 가능

import { useSearchParams } from "react-router-dom";
const [searchParams, setSearchParams] = useSearchParams();

// 'name' 쿼리 파라미터의 현재값 반환
const name = searchParams.get('name');

// 'name' 쿼리 파라미터 업데이트
// 만약 쿼리에 없으면 추가됨
// 새로운 객체 생성하여 전달, 기존 파라미터 무시
setSearchParams({name: value});

// 기존 쿼리 파라미터 유지하면서 특정 파라미터만 수정
searchParams.set("name", "jnary");
setSearchParams(searchParams);

파라미터? 쿼리스트링?

• url 파라미터
  • 특정 자원으로 조회
  • ex. 특정 id, 이름
• 쿼리스트링
  • 조회에 필요한 옵션이 필요할 때
  • ex. 키워드 검색, 페이지네이션, 정렬, 필터링