오늘은 URL 관련 유용한 Hooks 유틸 함수를 알아볼거에요
먼저 알아볼 함수는 2가지 인데요!
- PathParam을 쉽게 구하는 함수
usePathParam
- QueryString을 쉽게 구하는 함수
useQueryString
함수를 알아보기전에 PathParam과 QueryString에 대해서 알아보겠습니다.
http://host:port.com/posts?id=1
이런 URL중 ?
뒤에 id란 변수에 값을 담아 백엔드에 전달하는 방식이 QueryString 방식이에요.
해석하자면 posts에 담긴 정보중 id가 1인 posts자료를 달라는 것이죠
http://host:port.com/posts/1
QueryString에서 보여준 URL과 같은 내용이지만 형식이 다른 URL이에요
이렇게/
으로 구분해서 나누는방식이 PathParam입니다.
이제 QueryString과 PathParam을 쉽게 구하는 Hooks를 작성해 보도록 하겠습니다.
먼저 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();
으로 가져오시면 됩니다!
이번에는 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를 많이 만들어보세요!
오타나 잘못된 내용있으면 댓글로 피드백 환영합니다!
요즘 프로젝트를 진행하며 블로그쓸것들이 하나두개씩 많아지고 있어요 ㅎㅎ
앞으로 더 많이 쓰도록 노력하겠습니다! 감사합니다:)
제가 만들었던 hook이랑 비슷하네요.
저는 query-string대신 Web API인 URLSearchParams를 사용하였습니다.
그리고 항상 새로운 value를 리턴하기 때문에 useMemo를 사용해서 메모해두고 location이 변경되었을 경우에만 값이적용되도록 했습니다.
import { useMemo } from "react";
import { useLocation } from "react-router-dom";
export function useQuery(): URLSearchParams {
const location = useLocation();
return useMemo(() => new URLSearchParams(location.search), [location]);
}