Path Variable, Query Parameter

박정호·2023년 2월 9일
0
post-thumbnail

🚀 Start

프로젝트를 개발하며 페이지를 이동시키거나 상세페이지를 생성하는 등 항상 신경써야하는 부분은 라우팅 부분이었다. 이때 항상 등장하는 URL 파라미터, 쿼리 스트링, react-router에서 제공되는 훅들까지... 동작만 잘하면 된다는 마인드로 코드를 작성하였다.

✅ 나의 궁금증의 시작

가장 많이 봐온 것들이지만, 가장 관심 갖지 않고 넘어갔던 부분이 이 것이다. 

/users?id=123 # 아이디가 123인 사용자를 가져온다.
/users/123 # 아이디가 123인 사용자를 가져온다.

만약 두 방법의 차이가 뭔가요? 라는 질문을 받는다면 나는 지금까지는 모른다고 답했을 것이며, 그래도 개발 공부를 꽤 했지만 이런 것도 모른다는 것에 좀 창피할 것 같다. 😥

이번 기회에 정확히 어떻게 동작되고, 어떤 원리를 가지고 있는지 아랑보자.


🌐 URL

위의 두 방법의 공통점은 유동적인 값을 전달하기 위하여 URL로 넘겨진다는 것이다.


✅ 그리고 이 둘에 대해 알아보기 앞서...

나는 클라이언트 개발시 흔히 URL을 두가지 관점으로 바라본다.

URL의 근본적인 역할은 사용자가 원하는 정보의 위치와 종류를 파악할 수 있도록 웹페이지의 정보 구조를 반영하는 것이다.

그리고 흔히 우리가 아는 https://www.naver.com은 자윈의 위치보다는 인터넷 주소라는 현실적인 의미를 갖고 있다. 

http://localhost:3000/home     // home페이지
http://localhost:3000/about    // about페이지

반면, 자원의 위치라는 의미가 큰 경우는 서버와의 API 통신을 위해 백엔드 개발자가 정해놓은 URL을 통해 통신할 때일 것 같다.

http://localhost:8000/api/users // GET
http://localhost:8000/api/users/{username} // DELETE

결론적으로, 나는 URL은 실제 웹페이지의 실질적인 경로를 나타내는 주소을 하기도 하며, 백엔드와의 API통신을 위해 사용되는 주소가 되기도 한다고 정리하고 싶다.

그리고 URL은 가변적 웹페이지 정보를 처리하기 위한 정보로 path variable 또는 query parameter를 담아 넘겨준다.


🧐 Path...Query...Parameter...?

Path Variable은 말 그래돌 경로를 변수로 사용한다. 

/users/123 # 아이디가 123인 사용자를 가져온다.

Query Parameter은 경로 뒤에 입력 데이터를 함께 제공하는 식으로 사용되며 key,value 쌍으로 이루어진다. 또한, &로 연결하여 1쌍이상 여러 개의 데이터를 넘길 수도 있다.

/users?id=123 # 아이디가 123인 사용자를 가져온다.

✅ 가장 헷갈렸던 부분이 이 둘을 정의하는 명칭들이다.

  • Path Variable을 부르는 여러 단어

    • path variable

    • path parameter

    • paramter

    • URL parameter

  • Query Parameter을 부르는 여러 단어

    • query string

    • query parameter

    • query

    • URL query

✅ 이 둘을 뭐라 부르는 것이 가장 올바른 표현일까?

나의 아주 지극히 개인적인 생각으로는 Path Variable, Query Parameter로 구분하는 것이 가장 좋을 것 같다.

둘 모두 파라미터라고 표현하는 경우도 있다.

하지만, URL의 파라미터 뜻은 ? 이후 문자열을 말하는 것으로 쿼리 파라미터를 뜻하는 것을 알 수 있었다.

우리가 URL의 파라미터는 쿼리스트링이라고도 불리며, 가변적인 콘텐츠를 처리하기 위한 정보로 정의되며, 우리가 알던 Path Variable 또는 Path Paramter라고 불리는 것은 쿼리스트링 앞의 path라고 생각하면 될 것 같다.

Path Variable과 Query Paramter을 통해서 각각의 데이터에 대한 요청과 페이지를 구분해줄 수 있는 것은 맞지만, Path Variable가 파라미터로 표현되는 것은 둘을 비교하기 위한 표현인 것인지, 아니면 파라미터가 정말로 맞는 표현인건지는... (댓글과 훈수 환영입니다 ㅜㅜ)

// Path Variable
GET /users/{id}
GET /cars/{carId}/drivers/{driverId}
GET /report.{format}

// Query Paramter
GET /pets/findByStatus?status=available
GET /notes?offset=100&limit=50


👉 API 라우팅

✅ products data

// http://localhost:8000/products
{
  "results":[
  	{
    	"id": 1,
        "name": "사과",
        "price": "3000원",
    }
    {
    	"id": 2,
        "name": "바나나",
        "price": "2000원",
    }
    {
    	"id": 3,
        "name": "귤",
        "price": "4000원",
    }
  ]
}

✅ 아래와 같은 경우 아이디가 1인 상품을 가져오는 것으로, 큰 차이를 느낄 수 없다.

  • Path Variable
http://localhost:8000/products/1
{
    	"id": 1,
        "name": "사과",
        "price": "3000원",
}
  • Query Parameter
http://localhost:8000/products/?id=1
{
    	"id": 1,
        "name": "사과",
        "price": "3000원",
}

✅ 하지만, 다음과 같은 경우 Query Parameter은 여러 조건들을 넣어서 그에 맞는 데이터를 불러올 수 있다.

  • Path Variable
http://localhost:8000/products/1
{
    	"id": 1,
        "name": "사과",
        "price": "3000원",
}
  • Query Parameter 
http://localhost:8000/products/?Pirce=3000원&name=사과
{
    	"id": 1,
        "name": "사과",
        "price": "3000원",
}

결과적으로 path variable는 전체 데이터 또는 특정 하나의 데이터를 다룰 때 사용되고, query paramter는 filtering, ordering, searching 과 같이 정렬된 데이터를 다룰 때 사용하는 것이 이상적일 것이다.

  • Path Variable : /profiles/joy

    • 일반적으로 파라미터는 특정 id나 이름을 가지고 조회할 때 사용

  • Query Parameter : /about?detail=true

    • 쿼리의 경우엔 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달할 때 사용
http://localhost:8000/profiles/joy/about?detail=true

👉 React 동적 라우팅

React는 흔히 말하는 페이지 이동이라는 기능을 react-router를 통해서 동작한다.

라우팅이란 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것을 말하며, 한가지 알아야할 것은 React는 SPA방식으로 새로운 페이지를 로드하는 MPA와 달리 하나의 HTML에 필요 데이터를 가져오는 형태로 동작된다.

💡 React Router

  • 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.

자세히 👉


그리고 Route의 path속성에 경로, element에는 컴포넌트를 넣어줘 페이지를 라우팅해준다.

React로 개발하며 늘 궁금증이 생기는 것이 바로 상세페이지를 구현시 어떻게 해당 상품에 대한 페이지로 이동하게 되는지이다.

이는 동적라우팅을 통해서 route의 경로에 특정값을 넣어 해당 페이지로 이동이 가능하다.

그리고 바로 path variable와 query parameter 2가지 방법을 통해 동적 라우팅 기능을 구현할 수 있다.


✅ Path Variable

Path Variable의 경우 useParams을 사용한다.

import {Route, Routes } from 'react-router-dom';

const App = () => (
 
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<LogIn />} />
      <Route path="/signup" element={<SignUp />} />
      <Route path="/workspace/:detail/:id" element={<Workspace />} />
    </Routes>
);


const Home = () => {
	return <Link to="/workspace/test/123"> move </Link>
}

// Route : /:workspace:detail
const Workspace = () => { 
    const params = useParams();
  
    return <>
      		<div> {params.detail} </div> // test
            <div> {params.id} </div> // 123
		   </>
}

💡 useParams는 Route path와 일치하는 현재 URL에서 동적 매개변수를 읽는데 사용된다.

<Route path="/:workspace/:detail/*" element={<Workspace />} />

// useParams  - key/value가 있는 객체를 반환 (= query paramter 형태)
{
  workspave: <some value>,
  detail: <some value>
}

✅ Query Parameter

Query Parameter의 경우 URLSearchParams, Query String, useSearchParams을 사용한다.

import {Route, Routes } from 'react-router-dom';

const App = () => (
 
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<LogIn />} />
      <Route path="/signup" element={<SignUp />} />
      <Route path="/workspace/:detail/:id" element={<Workspace />} />
    </Routes>
);


const Home = () => {
	return <Link to="/workspace?detail=test&id=123"> move </Link>
}


// 1️⃣ URL Search Params - Web API 제공
const Workspace = () => {
  	const location = useLocation(); // 현재 URL 전체 정보 가져오기
	let query = new URLSearchParams(location.search);
  
    return (
      		<div>{query.get("detail")}</div> // test
		    <div>{query.get("id")}</div> // 123
     		)
      }
    )
}

// 2️⃣ query-string  - 외부패키지
const Workspace = () => {
  	const location = useLocation(); // 현재 URL 전체 정보 가져오기
	let query = queryString.parse(location.search);
  
    return (
      		<div>{query.detail}</div> // test
		    <div>{query.id}</div> // 123
     		)
      }
    )
}

// 3️⃣ query-string  - 외부패키지
const Workspace = () => {
  	let [searchParams, setSearchParams] = useSearchParams();
    const detail = searchParams.get('detail');
    const id = searchParams.get('id');
  
    return (
      		<div>{detail}</div> // test
		    <div>{id}</div> // 123
     		)
      }
    )
}

💡 loaction.search는 쿼리스트링을 문자열 형태로 가져오므로, URLSearchParams, qs를 통해 객체형태로 만들어주는 반면 useSearchparams는 한번에 객체로 펺게 가져올 수 있다.


🔗 Reference
👉 URL parameter 가져오기
👉 자바스크립트에서 URL 쿼리스트링(Query String) 쉽게 가져오는 방법
👉 [Web] Path Variable VS Query Parameter
👉 파라미터(Parameter)와 쿼리(Query) : 유동적인 값 전달을 위한 URL 전략

profile
박정호
기록하여 기억하고, 계획하여 실천하자. will be a FE developer (HOME버튼을 클릭하여 Notion으로 놀러오세요!)
이전 포스트

PJH's live chat - Socket.io

다음 포스트

합성 vs 상속

0개의 댓글