React Routing

프로젝트를 하면서 새로운 내용을 배우면 바로바로 정리해놓는게 좋더라.
오늘은 urlQuery를 쓸 일이 생겨서, 이것에 대해 알아보자.

1. url

우리가 흔히 보는 url의 구조이다. MDN참조
react-router 라이브러리를 이용하면 라우팅이 가능해진다.

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from 'components/Home';

const App = () => {
  const id = 1;
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/student/:id' component={Home} />
      </Switch>
    </BrowserRouter>
  );
};

App.js에서 ~/student/1로 라우팅한다.
이때 Home 컴포넌트는 기본적으로 history객체를 props로 받게된다.
그리고 함수형 컴포넌트에서는 useHistory객체를 이용하여 history 객체에 접근 가능하며,
push/goBack/replace/block 등의 함수를 이용하여 직접적으로 라우팅할 수 있다.

.catch((e) => {
        toast.error(e.message);
        history.push("/students");
      });

2. parameter?

url에 변수를 표현하는 방법은 2가지가 있다.
이번에 알아볼 urlQuery와 urlParams가 존재한다.

먼저 urlParams는 부모 컴포넌트로 부터 match 정보를 받아온다.
match.params로 접근한 객체에는 현재 url이 Route 컴포넌트에서 임의로 정한 규칙과 어떻게 일치하는지에 대한 정보가 들어있다. 보통 urlParams는 id나 userName 같은 정적인 변수를 받아오는데 사용된다.

<Route path="/.../:parameters component={Page}"
Page 컴포넌트에서 props를 받고, match.params.parameters로 url의 변수에 접근 가능하다.
함수형 컴포넌트에서는 useParams라는 Hook을 이용하면 더욱 쉽게 url에 접근이 가능하다.

const { id, userName } = useParams();

이제 urlQuery를 보자.
Query는 라우터로부터 전달되는 props 개체의 location에 존재하는 search 값으로부터 받아올 수 있으며, 주로 검색 기능이나 페이지에 특정 옵션을 걸 때 사용한다.

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

함수형 컴포넌트에서는 useLocation을 통해 위 코드와 같은 location 객체에 접근할 수 있다. 우리가 분석하고자 하는 query-string은 search 값에 존재하며, ?A=B&C=D...의 구조로 params 보단 다소 복잡하게 되어 있다.
이 문자열을 파싱하여 분석하기 위한 라이브러리로 query-string(qs)나 URLSearchParams가 있는데, 여기서는 URLSearchParams를 이용해 보자. MDN
useLocation Hook을 이용하면 더욱 쉽게 다룰 수 있다.

const { search } = useLocation(); // search ==="q=URLUtils.searchParams&topic=api"
// 맨 앞의 ?는 제거된 채로 인식됨
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

이번 프로젝트에서 사용한 방식은
1. 검색 버튼을 누르면 history.push를 이용해 /...?A=B&C=D로 보내고
2. location객체에서 search값을 받아오고
3. 적당한 파싱 라이브러리를 이용하여 key값과 value값을 관리하고
의 순서대로 진행되었다.