✏️ 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