useLocation VS useParams

useLocation

useLocation을 통해 state를 전달하며 관리를 했는데 상태이기 때문에 새로고침을 하면 변경한 상태값이 다 초기화되는 현상이 발생했다. useLocation의 설명을 확인해보니

This hook returns the current location object. This can be useful if you'd like to perform some side effect whenever the current location changes.

즉 현재 위치(페이지)의 정보를 알려주는 객체를 리턴한다.

useParams

The useParams hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the <Route path>. Child routes inherit all params from their parent routes.

useParams는 현재 url 라우터 경로와 일치하는 키와 값 객체를 리턴한다. 즉 path parameter의 정보를 얻을 수 있기 때문에 고유값을 부여할 수 있다.

<Route path="/manageInfo/:idx" element={<ManageInfo />}></Route>

라우터를 :(콜론)을 이용하여 설정해두면 path 뒤에 무엇이 오든 정상 작동한다.

  const params = useParams()
  const { idx: id } = params;
  const { data } = useQuery(['info detail', id], () => getTopDisplayDetail({ id }))

useParams를 이용하여 받은 객체는 라우터 설정에서 콜론 뒤에 온 문자열 idx로 온다. 이는 고유값을 줄 수 있어 유저 등의 API를 관리할 때 사용하기 편하다. 나는 상세보기 조회 id로 사용해서 useQuery를 이용해 데이터를 불러왔다. 이렇게 불러오면 경로 고유값을 갖기 때문에 새로고침을 해도 정보가 날라가지 않음을 알 수 있다.