🔡 path variable & query parameter

React router를 연습하면서 "url의 path varaible과 query parameter는 각각 어떠한 상황일 때 사용하면 좋을까?"라는 의문이 들었다.

그래서 본 포스팅에서는 path varaible과 query parameter의 정의와 활용에 대해 알아보겠다.

✔️ 정의

path variable과 query parameter가 무엇인지부터 먼저 알아보자.

Path variable

어떠한 경로를 기준으로 하위 경로를 변수로 지정하여 경로를 동적으로 작동하게 할 수 있다.

path variable은 말 그대로 경로 변수이다.
어떠한 경로를 기준으로 하위 경로를 임의적으로 지정할 수 있다.

/users/:username
/users/jev
/users/harry

users라는 경로를 기준으로 하위경로에 따라 user에 대한 정보를 보여주고싶다고 하였을 때 path variable을 username이라고 설정해주었다.

이 때 많은 user를 보여줘야할 수 있다.
많은 user에 대한 문서나 컴포넌트를 일일히 작성하는 것은 너무나 수공업이다.

때문에 동적으로 경로변수(:username)를 설정해주고 따로 설정해주지 않은경로(jev,harry)에 들어가면 경로를 설정해준것처럼 작동하게 해준다.

query paramter

query parameter는 특정 경로 뒤에 ?붙인 다음 key와 value 쌍의 string으로 이루어진다.
필요한 특정 조건에 따른 결과를 query parameter를 통해 보여준다.

query parameter는 특정한 경로뒤에 붙여서 할당되는 parameter인데 특정한 컨텐트를 찾거나 정렬할 때에 사용된다.

특정 경로 뒤에 ?가 붙여 사용되며 다음과 같이 key와 value쌍이 하나이상 될수도 있다.
/users?gender=man&birth=1996

/users?gender=man

만약 여러 user에 대한 정보를 담은 users라는 경로에서 성별이 남자인 user만 필터링해서 보고 싶다면 위 예시와 같이 표현할 수 있는 것이다.

🕹️ 활용

그렇다면 두 가지의 기능을 어떠한 상황일 때 사용하면 좋을까?

일반적으로 path variable은 경로 resource 식별하는데 사용하고 query parameter은 컨텐트를 필터링하거나 정렬하는데에 사용한다.

위에서 본 것과 같이 path variable은 특정경로에 대하여 여러가지 경로를 설정하거나 확인하는데 사용할 수 있다.

query parameter는 특정경로에 대하여 여러가지 컨텐트들이 있을 때 조건에 따라 특정한 결과를 보여줄 때 사용할 수 있다.

무조건 위와 같이 사용하는 것은 아니지만 일반적으로 두가지 기능을 위의 쓰임새와 같이 활용하고 있다.

따라서 각각을 필요한 상황에 맞춰 사용하면 될 것 같다.