[React] useNavigate / useParams / useLocation / useMatch

SPA (Single Page Application)

사용자가 다른 뷰로 이동 할 때 어플리케이션은 뷰를 동적으로 다시 그려줍니다.
SPA는 MPA 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 더 나은 UX를 제공합니다.
(= 페이지를 새로고침 하지 않습니다.)

React는 라이브러리로 라우팅 시스템을 갖추고 있지 않기 때문에, react-router-dom과 같은 라이브러리를 통해 라우팅 기능을 추가할 수 있습니다.

라우팅이란
다른 경로(url주소)에 따라 다른 View(화면)을 보여주는 것을 말합니다.

정적 라우팅

정적 라우팅은 정해진 경웨 대해서만 경로를 표현할 수 있습니다.
아래 코드는 정적 라우팅에 대한 예입니다.

function Router() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/products" element={<Products />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
};

url의 제일 끝에 특정 id 값이 들어가고, 해당 id값에 따라서 다른 상세 페이지 정보가 화면에 그려집니다. 이 때, 상품이 추가되거나 삭제되는 등 url에 대해 미리 경로의 형태와 갯수를 결정할 수 없기 때문에 동적인 경로에 대한 라우팅이 필요한 것입니다.

동적 라우팅

라우트는 경로에 특정 id값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 말합니다.

Path Parameter

라우트 끝에 들어가게 되는 각기 다른 id 값(매개변수)를 말합니다.

localhost:3000/product/2
localhost:3000/product/55
localhost:3000/product/100

url 경로에서 달라지는 부분을 저장하는 매개변수를 Path Parameter라고 하는데,
Router 컴포넌트에서 아래처럼 정의됩니다.

<BrowserRouter>
	<Routes>
        <Route path="/products/:id" element={<ProductDetail />} />
	</Routes>
</BrowserRouter>

:는 Path Parameter가 올 것임을 의미.
id는 해당 Path Parameter의 이름을 의미. 변수명 처럼 임의로 지정할 수 있습니다.

useNavigate, useParams, useLocation, useMatch

React에서는 상품 리스트 페이지에서 상품 상세 페이지로 링크를 연결 시켜주기 위해서 Link 태그를 이용합니다.
URL이 변하면 Router 컴포넌트에 정의 되어있는 path 값에 따라 ProductDetail 컴포넌트가 불러와지고,
해당 id에 대한 아이템 정보를 요청합니다.
이 때, 필요한 id값을 받아오는 법을 알아보겠습니다.

React Router에서 제공하는 훅으로 useParams, useLocation, useNavigate가 있는데
각각의 차이점과 활용법에 대해서 알아보도록 하겠습니다.

useNavigate

useNavigate의 리턴값은 함수 입니다.
페이지를 이동시키는 (url을 변경시키는) 함수를 반환합니다.

const navigate = useNavigate();

const onClickProduct = productId => navigate(`/product/${productId}`);

또는 인자에 정수값을 넣어주면 브라우저의 방문기록에 남아있는 경로들을 앞 뒤로 탐색할 수도 있습니다.

navigate(-1); // 뒤로가기
navigate(-2); // 뒤로 2페이지 가기
navigate(1); // 앞으로 가기

useParams

useParams의 리턴값은 path parameter 정보를 담고있는 객체입니다.

// 현재 경로: /product/1

function ProductDetail(props) {
  const params = useParams();
  console.log(params);
  
  return (
   ...
  )
}

// 콘솔 결과.
{
  id: 1,
}

id라는 프로퍼티 key name은 Router에서 :id로 표기해준 값입니다.

<Route path='/product/:id' element={<ProductDetail />} />

해당하는 경로로 이동했을 때, /:id에 해당하는 데이터를 받아올 수 있도록 쿼리 스트링을 작성합니다.

useLocation

useLocation의 리턴값은 경로 정보를 담고 있는 객체 입니다.

function ProductDetail(props) {
  const location = useLocation();
  console.log(location);
  
  return( ... );
}

// 결과 값
{
  pathname: '/product/1',
  search: '',
  hash: '',
  state: null,
  key: 'default'
}

pathname는 현재 경로 값.
search현재 경로의 query parameter 값.

pathname은 URL이 http://localhost:3000/product/1003 이라고 했을 때,
query parameter를 제외한 /product/1003이 출력됩니다.

search는 pathname이 출력했던 부분을 제외한 query parameter이 출력됩니다.

useMatch

useMatch는 url path 이름에 대해 패턴을 일치 시키고 일치 여부를 반환합니다.

const match = useMatch('/product/:id');

// 일치할 경우 결과 값
{
  params: {...}
  pathname: "/product"
  pathnameBase: "/product"
  pattern: {caseSensitive: false, end: true, path: "/product"}
}

// 일치하지 않을 경우 결과 값
null

컴포넌트가 렌더린 된 시점의 url이 인자 안의 url이 동일한지 체크합니다.
동일하다면 정보를 담은 객체를, 동일하지 않다면 null을 리턴합니다.