동적 라우팅
react-router-dom에서 동적 라우팅을 구현하는 방법은 Route 컴포넌트의 path prop에 : 기호를 활용하는 것이다. 경로/:문자열형태로 path를 설정하면 URL에서 경로/ 뒤에 무슨 글자가 오든 이 Route로 연결되게 된다.
Path Parameter
- useParams hook
import { useParams } from "react-router-dom"; const params = useParams();
을 사용해서 url뒤에 붙은 파라미터를 가져 올 수 있다.
(상세페이지에서 사용하면 좋음)
쿼리 스트링
구체적으로 요청을 하기위함
쿼리 스트링의 형태
- 쿼리 스트링은 이름 그대로 문자열의 형태를 띠고 있으며 key=value로 표현
- URL에서 쿼리 스트링이 시작된다는 표시는
?문자를 통해서 표현 - 쿼리 스트링 내에서 각각의
key=value페어를 구분할 때는&문자를 사용 - react-router-dom에서 쿼리 스트링을 활용하기 위해서 사전에 Router 컴포넌트에 특별한 설정을 할 필요는 없다.
컴포넌트에서 쿼리 스트링 값 가져오기
react-router-dom에서 쿼리 스트링을 가져올 때 사용할 수 있는 hook은 useLocation, useSearchParams 두 가지가 있다.
- useLocation hook
const location = useLocation(); //url 전체 가져오기
const queryString = location.search; // url 중 쿼리스트링 부분만 가져오기
전체 쿼리 스트링을 하나의 문자열 형태(?sort=popular)로 표현해 주기에 이 중에서 원하는 값만 가져오려면 저 문자열을 자바스크립트를 통해서 Parsing 하는 과정을 거쳐야 한다.
- useSearchParams hook
- 값을 읽어오는 메서드
const [searchParams, setSearchParams] = useSearchParams(); //쿼리스트링에 key:value로 세팅
searchParams.get(key); //key값으로 value가져오기
- 값을 변경하는 메서드
searchParams.set(key, value) // 쿼리스트링 세팅하는 함수(기존 값 변경)
searchParams.append(key, value) // 기존의 값을 변경하거나 삭제하지 않고 추가하는 방식
-> 후 setSearchParams(searchParams)
searchParams를 변경하는 메서드를 이용해서 searchParams의 값을 변경하더라도 실제 URL의 쿼리 스트링은 변경되지 않습니다. 변경된 searchParams를 이용해서 실제 쿼리 스트링을 변경시키려면 setSearchParams 함수에 searchParams를 인자로 전달하면서 호출해야 한다.
쿼리 스티링 방법은 페이징처리, 정렬처리에 유용하다.
