[React] React Router

혤·2022년 11월 29일

React

목록 보기

14/21

📌 React Router의 기본 구조

// src / routes / index.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";

<BrowserRouter>
  <Routes>
  	<Route exact path="/"  element={<Component />} />
  	<Route path="/r1"  element={<Router1 />} />
  	<Route path="/r1/:name"  element={<Router1 />}>
       <Route index element={<Router1Home />} />
    </Route>
  </Routes>
</BrowserRouter>

📍 BrowserRouter

History 객체를 생성하고, 초기 위치를 상태로 만들고 URL을 참조한다.

History 객체 ? History 객체는 History stack을 조작할 수 있도록 API를 제공하는 객체다. History stack은 접속 이력 스택으로 생각하면 된다. 브라우저의 뒤로가기 및 앞으로가기 버튼을 클릭할 때마다 참조하는 스택이다.

📍 Routes

Route Config라는 경로 객체 트리를 생성한다.
Route는 Routes 안에서만 유효하다.

Route Config ? 모든 Route에 대한 설정을 정리해놓은 경로 객체 트리다.

📍 Route

path가 현재 URL과 일치하면 element가 렌더링된다.

exact : 주어진 경로와 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여준다.
다른 path에 "/"도 포함되므로 Home 컴포넌트엔 exact 옵션을 줌으로써 경로를 구분해준다.
(React Router v6부터 가장 알맞는 경로로 알아서 찾아가기 때문에 exact가 사라졌다)
index : default child reoutes라고 생각하면 된다.
부모에 여러 개의 자식 route가 있는 경우 부모 경로에서 '/'인 경우를 설정한다.
:foo : URL의 params를 설정할 때는 :foo 형식으로 설정한다.

📌 useParams, useSearchParams

📍 useParams

URL의 params와 쿼리스트링을 쉽게 받아올 수 있는 훅이다.

// App.jsx

<Route path="/register/:id/:name" element={<Component />} />
  
// Component.jsx

import {useParams} from 'react-router-dom'

function Component() {
  const params = useParams();
  console.log(params);
}

'register / 1 / Charles'로 접속할 경우 콘솔창에 아래와 같이 찍힌다.

{
	id: 1,
    name: 'Charles'
}

📍 useSearchParams

useSearchParams는 두 개의 함수를 반환한다.
searchParams는 get을 통해 쉽게 쿼리스트링 값을 가져오도록 한다.
setSearchParams는 URL의 복잡도가 높아졌을 때 쿼리스트링을 쉽게 적용시킬 수 있는 함수이다.

// App.jsx

<Route path="/register/:id/:name" element={<Component />} />

// Component.jsx

import {useSearchParams} from 'react-router-dom'

function Component() {
  const [searchParams, setSearchParams] = useSearchParams();
  console.log(searchParams.get('id');
  console.log(searchParams.get('name');
}

'register / 1 / Charles'로 접속할 경우 콘솔창에 아래와 같이 찍힌다.

1
'Charles'

📌 useLocation, useNavigate

📍 useLocation

유저가 현재 머물러 있는 페이지에 대한 정보를 알려준다.

import {useLocation} from 'react-router-dom';

const location = useLocation();

useEffect(() => {
  console.log(location);
},[location])

콘솔을 살펴볼 경우 대표적으로 pathname과 search라는 객체가 출력된다.

pathname : 만약 웹 url이 http://localhost:3000/home?keyword=리액트 일 경우, 쿼리스트링을 제외한 /home이 출력된다.
search : 쿼리스트링을 분석해야 하는 상황에 유용하다. pathname이 출력했던 부분을 제외한 ?keyword=리액트 라는 쿼리스트링이 출력된다.
출력된 값은 query-string이라는 쿼리스트링 파싱 라이브러리를 이용하여 값을 얻어낼 수 있다.

📍 useNavigate

양식이 제출되거나 특정 event가 발생했을 때 url을 조작할 수 있는 interface를 제공한다.

import {useNavigate} from 'react-router-dom';

function Func() {
  const navigate = useNavigate();
  
  const onClickImg = () => {
    navigate(`/comment/id/내가 원하는 주소`);
  };
  
  return (
    <img src={...} onClick={onClickImg} />
  );
}

이미지를 클릭할 경우 useNavigate로 인해 기존 url이 www.naver.com이였다면, www.naver.com/comment/id...로 바뀌게 된다.

첫번째 인자로 주소를 받으며, 두번째 인자로 {replace: true or false}를 받는다.
true를 사용할 경우 navigate에 적힌 주소로 넘어간 후 뒤로가기를 하더라도 이전 페이지로 넘어가지 않고 메인 페이지("/")로 돌아가게 된다.
false는 뒤로가기가 가능하며 false가 default 값이다.
기존 useHistory가 React router v6로 넘어오면서 useNavigate로 바뀐 것이다.
따라서 useHistory에서 사용하던 window의 history를 이용한 navigate 기능도 사용할 수 있다.

<button onClick={() => navigate(-2)}> Go 2 pages back </button>

📌 레이아웃 설정

{children}을 사용해서 layout을 구성한 후 라우트에 항상 레이아웃과 연결짓도록 하는 것 대신, <Outlet />을 사용하면 {children}을 사용하는 것과 같은 효과를 낼 수 있다.

<Routes>
  <Route path="/member" element={<Member />}>
    <Route path=":memberId" element={<MemberInfo /> />
  </Route>
</Routes>
                     
// Member.jsx
<div>
  <header>Member</header>
  <Outlet /> // MemberInfo의 component가 Outlet에 위치하게 된다.
</div>