동적 라우팅
🔗 조각조각 - CRA 라우팅(react-router-dom v6, Router, Routes, Switch)
이전 게시글에서 react router를 구현하는 법을 알아 보았습니다. 아래는 Routes, Route 컴포넌트로 간단하게 라우트를 구현하는 코드의 일부분입니다.
<Routes>
<Route path="/" element= { Home } />
<Route path="/a" element= { A } />
<Route path="/a/*" element= { A ALL SUB } />
<Route path="/a/:id" element= { A ID } />
<Route path="/b" element= { B } />
<Route path="*" element= { ErrorPage } />
</Routes>위 코드중 <Route path="/A/*" element= { A ALL SUB } />를 좀 더 자세히 살펴보겠습니다. path에 윗줄 path="/a"인 코드와 다르게 '/'와 '와일드 카드'가 붙어있습니다. 이 덕분에 '/a/' url 뒤에 어떤 값이 오더라도 해당하는 element 페이지 컴포넌트를 렌더링 됩니다. (ex - 'a/test' url)
'/a/' 뒤에 어떤 값이 들어와도 라우팅 해준다는 것 즉 임의의 동적으로 변화하는 url이 뒤에 추가로 붙어도 라우팅 해준다는 것입니다. 이를 동적 라우팅이라 합니다.
// 단순 '/a/' url 뒤에 어느 값이 오든 특정 페이지 렌더링 위함
<Route path="/a/*" element= { A ALL SUB } />
// '/a/' url 뒤에 오는 값을 url 파라미터로 사용하기 위함
<Route path="/a/:id" element= { A ID } />이때 동적으로 변화하는 URL 뒷 부분을 컴포넌트에서 활용하기 위해 파라미터 혹은 쿼리 스트링을 사용해야합니다.
파라미터 : /post/123
쿼리 스트링: /post?id=123
이 처럼 파라미터와 쿼리 스트링으로 표현된 url을 통해 동적 라우팅이 가능합니다. 아래에서 쿼리 스트링과 URL 파라미터에 대해 좀더 자세히 살펴보겠습니다.
URL 파라미터(URL Parameter)
/post/123 => 하나의 파라미터를 가지는 경우
/post/123/456 => 복수개의 파라미터를 가지는 경우
위와 같이 url 뒤에 유동적으로 붙는 파라미터 값을 뜻합니다. '/' 뒤에 값이 붙으며 꼭 하나의 파라미터만 가지는 것은 아닙니다. 'post/123/456' 처럼 복수개의 파라미터를 받아올 수도 있습니다. 하지만 '/요소/요소에 해당하는 값'의 형식을 지켜주는 것이 restful 하기때문에 이런 경우 쿼리 스트링을 사용하는 것이 옳다고 생각됩니다.
URL 파라미터를 사용하기 위해 라우트 정의시 별도로 설정이 필요합니다. 아래 코드와 같이 라우트를 정의할 때 path 값으로 ':파라미터를 나타내는 변수'를 지정해주어야 합니다.
<BrowserRouter>
<Routes>
<Route path="/a/:id" element= { A ID } />
</Routes>
</BrowserRouter>이 경우 '/a/123' url로 접근시 URL 파라미터(id)는 123이 됩니다.
useParams
'/a/123' url로 접근시 렌더링 되는 페이지에서 '123'값을 얻기 위해 useParams 훅을 사용해야합니다.
function A() {
const { id } = useParams();
return (
<div>
{id}가 해당 페이지의 URL 파라미터값입니다.
</div>;
)
}
export default A;쿼리 스트링(Query string)
/post?id=123 => 하나의 쿼리를 가지는 경우
/post?id=123&?visible=true => 복수개의 쿼리를 가지는 경우 (여기서 true는 string으로 다루어야 합니다.)
쿼리는 질의라는 뜻을 가집니다. 따라서 '?'뒤에 key=value 스트링이 추가되어 url이 구성됩니다.(복수개의 key, value로 구성될 경우 &를 이용) 주의할 사항으로는 이름 그대로 string값이기 때문에 value 값이 boolean 값을 가진다고 해도 string으로 취급해서 다루어야 합니다.
쿼리 스트링은 URL 파라미터와 다르게 라우트 정의시 따로 처리해야할 코드가 없습니다. 그냥 페이지 컴포넌트에서 React Router 훅을 통해 쿼리에 접근이 가능합니다.
/post?id=123&?visible=true
앞서 URL 파라미터의 경우 페이지 컴포넌트에서 useParams 훅을 통해 파라미터에 접근이 가능했습니다. 쿼리 스트링은 useLocation과 useSearchParams 훅을 통해 쿼리에 접근이 간으합니다.
useLocation
useLocation 훅은 현재의 URL을 대표하는 location 객체를 반환하며 반환된 location 객체는 아래의 값들을 가집니다.
location.pathname : 쿼리스트링을 제외한 현재 주소의 경로
location.search : ?를 포함한 쿼리 스트링
location.hash : #뒤의 값 (해쉬 라우터 사용 시)
import React from "react";
import { useLocation } from "react-router-dom";
function A() {
const location =useLocation();
return (
<>
<div>{location.pathname}</div> // '/a/'
<div>{location.search}</div> // '?id=123&?visible=true'
</>
);
}
export default A;useSearchParams
위 useLocation 훅으로 얻은 location.search로 쿼리 스트링 값을 얻을 수 있었습니다. 이때 얻어낸 쿼리 스트링이 '?id=123&?visible=true'라면 key, value 값을 얻기위해 파싱하는 과정이 추가적으로 필요합니다.
이를 간단하게 도와주는 훅이 useSearchParams 훅 입니다.
useSearchParams 훅은 배열을 반환하며 반환된 값으로 쿼리 값을 얻기만 가능한 것이 아니라 쿼리 스트링 수정도 가능합니다.
'/post?id=123&?visible=true' url 접근 시
function A() {
const [searchParams, setSeratchParams] = useSearchParams();
const id = searchParams.get('id');
const visible = searchParams.get('visible');
return (
<div>
<div>{id}</div> // '123'
<div>{visible}</div> // 'true'
</div>
);
}
export default A;쿼리 스트링 수정
const [searchParams, setSeratchParams] = useSearchParams();
setSeratchParams({key1 : value1, key2 : value2});참고자료
