URL에서 쿼리스트링 값 받아오기

작업을 하다보니 한 페이지에 두개의 섹션에 각각의 페이지를 구현하는 일이 생겼다.

(페이지네이션에 각각의 페이지를 불러오는 것)

쿼리스트링으로 두개의 값을 넘기는 것은 간단했다.

<a class="page-link" href="/shelter?missing=${i}&abandoned=${j}">${i}</a>

 

missing과 abandoned에 각각 값을 넣어서 보내주면 되는 일이었다.

근데 다른 페이지의 현재 페이지 값을 어떻게 갖고 올까 고민하는 문제가 생겼다. 

 

이걸 해결해주기 위해서 찾은 방법이 URL에서 다른페이지에 해당하는 쿼리스트링 값을 가져오면 된다였다.

 

어떻게 가져오는지 알아보자.

 

현재 url이 http://localhost:5000/shelter?missing=3&abandoned=1 이라고 해보자.

 

이 url을 읽어오는 window 메소드는 아래와 같다.

window.location.href
(쿼리스트링만 가져오는 방법 : window.location.search)

그렇다면 여기서 내가 원하는 쿼리스트링의 값을 빼오는 방법을 알아보자.

const presentURL = window.location.href
const url = new URL(presentURL)

// URLSearchParams 객체 호출
const urlParams = url.searchParams

const missing = urlParams.get('missing')  // 3
const abandoned = urlParams.get('abandoned')  // 1

무엇인가 막혀서 방법을 찾을 때,

내가 필요한 값을 어디서 얻을 수 있는지 생각하고 그 방법들 중 가장 쉬운 게 어떤 것인지 선택하고

그 선택한 값에 예외는 없는지 확인하는 절차를 잊지않기.