[25.02.04 화요일]
개인과제 2일차, 2단 변신 과정중 베이스 단계를 마무리 했다!
이 전 보다는 리액트에 조금 익숙해진 것 같은 느낌적인 느낌!?
쪼끔 친해졌다고 금방 또 사이 멀어질뻔 했다.
동적라우팅에 대해서 패스파라미터만 배운것 같은데...
쿼리스트링으로 구현하라는 미션이 주어졌다..🤔
📌 동적라우팅
Route를 설정할 때 URL의 전체 형태를 미리 정의하는 것이 아니라, 특정 규칙을 정의한 후 규칙에 부합하는 URL의 경우에는 해당 element를 보여주게 설정한다.
즉, 임의의 동적으로 변화하는 url이 뒤에 추가로 붙어도 라우팅 해준다는 것.
//Router.jsx- 동적라우팅
import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
export default function Router() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} /> // 정적 라우팅
<Route path="/detail/:id" element={<Detail />} /> //동적 라우팅
</Routes>
</BrowserRouter>
);
}🔗 Path Parameter
경로/:문자열 형태로 path를 설정하면 URL에서 경로/ 뒤에 글자가 오면 이 Route로 연결해준다.
/detail/${data.id}
위 처럼 특정페이지 id(path parameter)값을 가져올때는
useParams hook을 이용한다
import { useParams } from 'react-router-dom';
const param = useParams();
const detailId = params.id;
//
<Link to={`/detail/${detailId}`}>🔗 Query String
쿼리는 질문이라는 뜻이다.
쿼리스트링은 URL에서 물음표 뒤 모든 문자열을 의미한다.
/products?sort=popular&color=red
쿼리스트링: key=value 형태의 문자열로 표현 (key=value 페어의 개수 제한은 없음)
? : 쿼리스트링의 시작 표시 (start of parameters)
& : key=value 페어 구분 표시 (separator)
useSearchParams hook
const [searchParams, setSearchParams] = useSearchParams();searchParams: URLSearchParams 객체
setSearchParams 함수: 인자로 객체 또는 문자열을 넣어서 호출하면 현재 URL의 쿼리 스트링을 변경하는 기능을 제공 (컴포넌트 안에서 쿼리 스트링을 변경하고자 할 때 사용)
searchParams에 정의된 메서드
1. 값을 읽어오는 메서드
searchParams.get(key): 특정한 key의 value를 가져오는 메서드
원하는 쿼리 스트링의 key를 인자로 넣어서 메서드를 호출하면 해당 key에 부합하는 value가 리턴된다.searchParams.getAll(key): 특정한 key에 부합하는 value가 두 개 이상일 경우 get 메서드는 제일 먼저 나온 value만 리턴해준다. getAll 메서드는 해당 key에 해당하는 모든 value 값들을 배열의 형태로 리턴해준다.
2. 값을 변경하는 메서드
searchParams의 값을 변경하더라도 실제 URL의 쿼리 스트링은 변경되지 않는다. 실제 쿼리 스트링을 변경시키려면 setSearchParams 함수에 searchParams를 인자로 전달하면서 호출해야 한다.
searchParams.set(key, value): 메서드를 호출하면서 인자로 전달한 key 값을 value로 설정하는 메서드
만약 동일한 key에 여러 value가 이미 존재하고 있었다면, set 메서드를 호출하면서 설정한 값 외에는 삭제된다.searchParams.append(key, value): 메서드를 호출하면서 인자로 전달한 key 값을 value로 추가하는 메서드
기존의 값들을 변경하거나 삭제하지 않고 추가하는 방식으로 동작한다.
- 또한 라우터에서 어떤방식으로 설정을 해주었느냐에 따라 파라미터는 잘 입력되었어도 라우팅 되지 않을 수있으니 꼭! 확인!!
<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>
// 단순 '/a/' url 뒤에 어느 값이 오든 특정 페이지 렌더링
<Route path="/a/*" element= { A ALL SUB } />
// '/a/' url 뒤에 오는 값을 url 파라미터로 사용
<Route path="/a/:id" element= { A ID } />