URLSearchParams, 주소 쿼리스트링, 파라미터 변경

 

오늘은 URL 관련 유용한 Hooks 유틸 함수를 알아볼거에요
먼저 알아볼 함수는 2가지 인데요!

• PathParam을 쉽게 구하는 함수 usePathParam
• QueryString을 쉽게 구하는 함수 useQueryString

함수를 알아보기전에 PathParam과 QueryString에 대해서 알아보겠습니다.

1) QueryString

http://host:port.com/posts?id=1
이런 URL중 ? 뒤에 id란 변수에 값을 담아 백엔드에 전달하는 방식이 QueryString 방식이에요.
해석하자면 posts에 담긴 정보중 id가 1인 posts자료를 달라는 것이죠

2) PathParam

http://host:port.com/posts/1
QueryString에서 보여준 URL과 같은 내용이지만 형식이 다른 URL이에요
이렇게/으로 구분해서 나누는방식이 PathParam입니다.

---

이제 QueryString과 PathParam을 쉽게 구하는 Hooks를 작성해 보도록 하겠습니다.

1) useQueryString

먼저 query-string과 react-router-dom lib를 다운 받아주세요!
(QueryString을 Parse할 수 있는 lib면 다 괜찮아요😊)

yarn add query-string react-router-dom

그런 후 hooks폴더에 useQueryString.ts라는 파일을 작성하겠습니다.
hooks/useQueryString.ts

...
import { useLocation } from "react-router-dom";
import queryString from "query-string";

const useQueryString = () => {
  const { search } = useLocation();
  const query = queryString.parse(search);

  return query;
};

export default useQueryString;

네 끝이에요! 엄청 간단하죠?
이제 사용법을 알아볼게요

저는 검색시 검색 결과를 searchValue 라는 QueryString으로 넘겨서 받아볼겁니다.
그럼 url은 http://host:port/search?searchValue=검색키워드 처럼되겠죠?

component/Search.tsx

...
import useQueryString from 'hooks/useQueryString.ts';

const Search = () => {
  const { SearchValue } = useQueryString();
  
  return (
  	<div> {SearchValue} </div>
  )
}

export default Search;

네 이렇게 URL에 있는 변수이름을 const {변수명} = useQueryString(); 으로 가져오시면 됩니다!

2) usePathParam

이번에는 react-router-dom lib만 다운받아주세요!

yarn add react-router-dom

그런 후 hooks폴더에 usePathParam.ts라는 파일을 작성해볼게요
hooks/usePathParam.ts

...
import { useLocation } from "react-router-dom";

const usePathParams = () => {
  const { pathname } = useLocation();
  return pathname;
};

export default usePathParams;

네 이번에는 QueryString보다 간단하죠?
하지만 위력은 간단한것 치고 매우 쎄답니다😎.

저는 현재 http://host:port/Search?searchValue=안녕하세요 라는 페이지에 있어요
여기서 PathParam을 사용한다면
component/Search.tsx

...
import usePathParam from 'hooks/usePathParam';

const Search = () => {
  const pathParam: string = usePathParam();
  
  return (
  	<div> {pathParam} </div>
  )
}

export default Search;

아래 사진과 같이 /Search가 잘 나오게됩니다!

마치며

오늘은 유용한 URL 관련 Hooks함수들을 알아보았는데요,
활용할 수 있는 방법도 많고 조금만 생각하면 변형하고 추가할 수 있는 hooks들이 많으니 여러분도 유용한 hooks를 많이 만들어보세요!
오타나 잘못된 내용있으면 댓글로 피드백 환영합니다!
요즘 프로젝트를 진행하며 블로그쓸것들이 하나두개씩 많아지고 있어요 ㅎㅎ
앞으로 더 많이 쓰도록 노력하겠습니다! 감사합니다:)

 

---

자바스크립트에서 주소 입력창에 입력된 파라미터 값을 다른 값으로 변경하는 방법을 알아봅니다.


# 주소창의 현재 파라미터를 다른 값으로 바꾸기쉽게 말해 현재 아래와 같은 페이지값의 파라미터를 다른 값으로 바꾸는 방법이라고 생각하시면 됩니다.

// 변경 전
https://webisfree.com?page=1

// 변경 후
https://webisfree.com?page=5

위와 같이 페이지를 변경할 때 가장 많이 사용됩니다. 여기서 문제는 파라미터가 page값만 존재하는 경우는 거의 없을 것입니다. 아래처럼 여러개의 값들이 존재하겠죠...

https://webisfree.com?page=1&category=js&tag=etc

파리미터가 더 많은 경우 간단하게 구현하는 방법이 쉽게 떠오르지 않는데요 이때 사용 가능한 방법이 바로 URLSearchParams를 사용하는 방법입니다.

URLSearchParams

자세한 방법은 아래 링크에서 확인하시기 바랍니다.

관련 링크 바로가기 >
https://webisfree.com/2019-07-26/자바스크립트에서-url-쿼리스트링(query-string)-쉽게-가져오는-방법

여기서는 이를 실제 사용하여 다른 값으로 변경하는 부분만 알아봅니다.


! URLSearchParams를 사용하여 파라미터 변경 예제간단한 예제를 만들어보는게 가장 빠른 방법이죠. 아래의 함수는 현재 페이지를 다른 페이지로 변경하도록 이동하는 함수입니다. 인자로 원하는 페이지 값을 전달 받습니다.

const movePage = function(page) {
  const URLSearch = new URLSearchParams(location.search);
  URLSearch.set('page', String(page));
  const newParam = URLSearch.toString();

  window.open(location.pathname + '?' + newParam, '_self');
};

완성된 함수는 위 코드와 같습니다. 순서대로 설명하자면...

1. URLSearchParams를 사용하여 새로운 인스턴스 URLSearch 를 생성

const URLSearch = new URLSearchParams(location.search);

2. 생성된 인스턴스에 set() 함수를 사용하여 새로운 페이지로 변경

URLSearch.set('page', String(page));

3. 변경된 파라미터를 문자열로 가져오기

const newParam = URLSearch.toString();

4. 마지막으로 해당 파라미터를 사용하여 새로운 주소로 이동

window.open(location.pathname + '?' + newParam, '_self');

이제 위 함수를 실행하면 새로운 주소창으로 변경된 page 파라미터 값을 사용하여 이동하게 됩니다.


여기까지 간단하게 현재 주소창의 파라미터를 변경하여 이동하는 방법을 알아보았습니다.

 

---

 

# 쿼리스트링 정보 자바스크립트 읽어오는 방법웹페이지로 정보를 전달하고 이를 읽어오는 방법으로 쿼리스트링(query string)을 통해 전달할 수 있습니다. 이렇게 전달된 경우 아래와 같은 형태의 url 주소를 가지고 있겠죠.

https://webisfree.com/?name=webisfree&no=123&order=5

만약 자바스크립트를 사용하여 전달 된 파라미터 값을 읽으려면 어떻게 할까요? 방법을 생각해보면 아래와 같이 떠오를 수 있습니다.

@ location.search 값에 split() 사용 또는 정규표현식 사용하기
split()은 특정 문자를 기준으로 문자열을 자르기 때문에 & 기호를 기준으로 잘라 원하는 값을 찾을 수 있습니다. 다만 간단한 방법은 아니죠.

@ URLSearchParams를 사용하는 방법
오늘 알아볼 방법은 바로 이 방법입니다. 최근 브라우저에서는 URLSearchParams를 사용할 수 있는데요 ~ 이를 사용하면 간단하게 원하는 값을 가장 쉽고 빠르게 가져올 수 있습니다.

URLSearchParams

사용하기 위해서는 일단 URLSearchParams()에 파라미터로 location.search를 넘겨야합니다.

const URLSearch = new URLSearchParams(location.search);

이제 URLSearch를 사용하여 get(), set() 등의 편리한 메소드 역시 지원합니다.

has()  //  값의 여부를 불리언으로 반환
get()  //  일치하는 경우 해당하는 값을 반환함
getAll()  //  일치하는 값이 여러개인 경우 배열로 모두 반환함
delete()  //  특정 값을 삭제 함

append(a, b)  // 새로운 값을 append하여 추가함
set(a, b)  //  값을 변경 또는기존 값을 바꿈

그럼 아래는 간단한 예제입니다.


[[ 알아둘 것 ]] 웹사이트가 hash #를 사용하는 경우
프론트엔드의 환경 즉 vue, react 등의 프레임워크에서 history 모드가 아니라면 location.search를 통해 쿼리스트링 값을 가져올 수 없으므로 여기서의 방법은 적용하기 어렵습니다. 이 경우 location.hash 값을 사용하여 정규식을 사용하는 방법이 많이 사용됩니다. 이 점 알아두시기 바랍니다.



# URLSearchParams 예제보기
그럼 간단한 예제를 만들고 살펴보겠습니다. 먼저 값을 찾기 위해서 이를 사용하여 간단한 함수를 만들고 인자로 찾을 값을 넘기도록 해보겠습니다.
만약 주소가 아래와 같다면?

https://webisfree.com/?name=webisfree&no=123&order=5

여기서 no의 값 123을 가져오기 위해서 searchParam()이라는 함수를 만들어보겠습니다.

function searchParam(key) {
  return new URLSearchParams(location.search).get(key);
};

코드는 매우 간단합니다. 위 함수 searchParam()은 어떤 값을 넘기면 URL 파라미터에서 찾아 일치하는 값을 반환하게 됩니다.

searchParam('id');

// 123을 출력함

매우 간단하죠? 문자열을 자르거나 정규표현식을 이용하는 것 보다 훨씬 단순하며 더 많은 메소드를 사용하여 활용할 수 있습니다.


! 쿼리스트링으로 넘어오는 파라미터가 복수개인 경우
한 개가 아닌 만약 여러개의 값이 넘어올 경우에는 getAll() 메소드를 사용합니다. 예를들어 아래와 같은 주소인 경우

/posts/?a=1&a=2&b=2

a의 값이 한 개 이상이므로 배열로 전달 받기 위해서 get()이 아닌 getAll()을 사용합니다.

new URLSearchParams(location.search).getAll(key);

이제 출력해보면 a의 값은 배열로 다음과 같이 나타납니다.

urlSearch = new URLSearchParams(location.search);
urlSearch.getAll('a');

[1, 2] // a의 값 출력 결과

여기까지 URLSearchParams API에 대하여 알아봤습니다.

 

 

출처:

https://velog.io/@jce1407/%EC%9C%A0%EC%9A%A9%ED%95%9C-URL-Hooks

React 유용한 URL Hooks

 

https://webisfree.com/2020-10-30/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-urlsearchparams-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EC%A3%BC%EC%86%8C-%EC%BF%BC%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A7%81-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0

자바스크립트에서 URLSearchParams 사용하여 주소 쿼리스트링, 파라미터 변경하기

 

https://webisfree.com/2019-07-26/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-url-%EC%BF%BC%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A7%81(query-string)-%EC%89%BD%EA%B2%8C-%EA%B0%80%EC%A0%B8%EC%98%A4%EB%8A%94-%EB%B0%A9%EB%B2%95 

자바스크립트에서 URL 쿼리스트링(query string) 쉽게 가져오는 방법