✏️ React의 useParams, useLocation 그리고 Query String
오늘은 `useParams`와 `useLocation`에 대해서 공부를 해보았다.
하나하나씩 알아보자!
들어가기 전에!
`useParams`와 `useLocation`은 react-router-dom에서 제공해 주는 hook이기 때문에 설치를 진행해야 한다.
npm i react-router-dom
//또는
yarn add react-router-dom
useParams
React의 라우터와 연관되어 있는 내용으로, Parameter(파라미터)의 정보를 가져와서 활용하고 싶을 때 사용한다.
동적 url 파라미터는 url경로의 일부로 포함된다.
ex) `/detail/:id` 의 경로를 설정해주면 `:id`는 실제로 동적으로 변하고, 해당되는 url을 가져오는 역할을 한다.
잠깐! 파라미터가 뭔가요?
파라미터는 url주소에 유동적인 값을 넣는 형태이다.
뒷부분에 id, 이름, 특정 데이터를 조회할 때 사용한다.
useParams 사용해보기
먼저 react-router-dom을 설치한 뒤, Router의 기본 설정을 완료했다고 가정해보겠다.
<BrowserRouter>
<Routes>
<Route
path="/detail/:id"
element={<Detail />}
/>
</Routes>
</BrowserRouter>
현재 Router을 사용하고 있는 컴포넌트에서 `path="/detail/:id"`를 동적 url로 선언해 주었다.
useNavigate hook으로 이동시킬때, 현재의 id값을 넣어서 보내주기
<li
key={item.id}
onClick={() => {
navigate(`/detail/${item.id}`);
}}
>
`useNavigate`훅을 사용해서, `detail`페이지로 이동할 때 id값을 함께 넘겨준다.
useParams로 파라미터를 받아오기
import { useParams } from "react-router-dom";
export default function Detail() {
const { id } = useParams();
return (
생략
);
}
`useParams`훅을 import 해주고,
useParams 훅을 불러와서 변수 `id`에 담았다.
`console.log(id)`를 찍어보면 현재 url과 같은 내용을 알 수 있다.
이 부분을 활용하여 현재 `id`값과 같으면 `수정`과 `삭제`하는 로직을 짤 수 있게 된다!
useLocation
파라미터가 아닌 현재 페이지의 `Pathname`을 가져오려면, `useLocation hook` 을 사용한다.
http://URL/detail/1
detail은 pathname, 1은 parameter이다.
즉, URL/detail/1 이라고 가정했을 때,
파라미터가 `1`이 되고, `pathname`은 `detail/1` 이 된다.
useLoaction 사용 예시
import { useLocation } from 'react-router-dom';
import 해서 `useLocation`을 불러온다.
const location = useLocation();
변수에 해당 정보를 담는다.
console.log로 찍어보면 `pathname`은 이렇게 구성되어 있다는 것을 알 수 있다.
pathname : 현재 주소의 경로(쿼리스트링 제외한 `?` 앞의 값을 의미한다)
search : 앞에 `?` 문자를 포함한 쿼리스트링 값
state : 페이지로 이동할때 임의로 넣을수 있는 상태값
key : location의 고유 값, 초기값은 `default` 이고 페이지가 변경될 때 마다 고유의 값이 생성된다.
이렇게도 활용 가능!
import { useLocation } from 'react-router-dom';
const location = useLocation();
const [userId, setUserId] = useState(
location.state?.userId
);
앞서 `state`는
`location` 의 `state`의 프로퍼티에 내가 보낸 데이터들을 보낼 수 있다.
만약에 `location.search`를 받는다고 가정해보자.
<div> 쿼리스트링의 search - {location.search}</div>
//결과값
쿼리스트링의 search - ?detail=true&mode=1
결과값은 이렇게 나오고 있고, 직접 `?`와 `&`를 파싱해줘야하는 번거로움이 존재한다.
그래서 리액트는 `useSearchParams` hook이 존재하게 된다.
`useSearchParams`는 다음 포스팅에서 개념정리를 해보겠다.
Query String 쿼리스트링이란
쿼리스트링은 url에서 `?` 다음으로 오는 것들을 의미한다.
쿼리스트링은 별도의 매핑을 하지 않아도 자동으로 매핑이 된다.
즉 `?` 키워드 뒤의 정보들은 페이지 라우팅 경로에 영향을 주지 않는다.
`useSearchParams`와 연관지을 수 있다.
http://URL/course?order=seq&skill=detail3
현재 예시에서, 쿼리스트링은 `order=seq&skill=detail3`이렇게 된다.
쿼리스트링을 나누는 방식은 `&`을 사용하면 되고, 각 페이지의 쿼리스트링을 반환할 때, `useLocation`을 사용한다.
파라미터 예시 : ?page=1&keyword=react
쿼리스트링 예시 : page=1&keyword=react
파라미터는 ID, 이름, 특정 데이터를 조회할 때 사용한다.
쿼리스트링은 키워드 검색, 페이지네이션, 정렬방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용한다.
useSearchParams 정리
✏️ React의 useSearchParams
seokachu.tistory.com