React 유용한 URL Hooks

오늘은 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://velog.io/@jcinsh/Query-string-path-variable
• https://ryan-han.com/post/translated/pathvariable_queryparam