<div id="readability-page-1" class="page"><div>오늘은 URL 관련 유용한 Hooks 유틸 함수를 알아볼거에요 
먼저 알아볼 함수는 2가지 인데요!
<blockquote>
<ul>
<li>PathParam을 쉽게 구하는 함수 <code>usePathParam</code></li>
<li>QueryString을 쉽게 구하는 함수 <code>useQueryString</code></li>
</ul>
</blockquote>
함수를 알아보기전에 PathParam과 QueryString에 대해서 알아보겠습니다.
<h3 id="1-querystring">1) QueryString</h3>
<code>http://host:port.com/posts?id=1</code> 
이런 URL중 <code>?</code> 뒤에 id란 변수에 값을 담아 백엔드에 전달하는 방식이 QueryString 방식이에요. 
해석하자면 posts에 담긴 정보중 id가 1인 posts자료를 달라는 것이죠
<h3 id="2-pathparam">2) PathParam</h3>
<code>http://host:port.com/posts/1</code> 
QueryString에서 보여준 URL과 같은 내용이지만 형식이 다른 URL이에요 
이렇게<code>/</code>으로 구분해서 나누는방식이 PathParam입니다.
<hr>
이제 QueryString과 PathParam을 쉽게 구하는 Hooks를 작성해 보도록 하겠습니다.
<h3 id="1-usequerystring">1) useQueryString</h3>
먼저 <code>query-string</code>과 <code>react-router-dom</code> lib를 다운 받아주세요! 
(QueryString을 Parse할 수 있는 lib면 다 괜찮아요😊)
<pre><code></code></pre>
<code>yarn add query-string react-router-dom </code>
<pre><code></code></pre>
그런 후 hooks폴더에 useQueryString.ts라는 파일을 작성하겠습니다. 
hooks/useQueryString.ts
<pre><code>...
import { useLocation } from "react-router-dom";
import queryString from "query-string";

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

 return query;
};

export default useQueryString;</code></pre>
네 끝이에요! 엄청 간단하죠? 
이제 사용법을 알아볼게요
<pre><code></code></pre>
저는 검색시 검색 결과를 <code>searchValue</code> 라는 QueryString으로 넘겨서 받아볼겁니다. 
그럼 url은 <code>http://host:port/search?searchValue=검색키워드</code> 처럼되겠죠?
component/Search.tsx
<pre><code>...
import useQueryString from 'hooks/useQueryString.ts';

const Search = () =&gt; {
 const { SearchValue } = useQueryString();
 
 return (
 	&lt;div&gt; {SearchValue} &lt;/div&gt;
 )
}

export default Search;</code></pre>
네 이렇게 URL에 있는 변수이름을 <code>const {변수명} = useQueryString();</code> 으로 가져오시면 됩니다!
<h3 id="2-usepathparam">2) usePathParam</h3>
이번에는 <code>react-router-dom</code> lib만 다운받아주세요!
<pre><code></code></pre>
<code>yarn add react-router-dom </code>
<pre><code></code></pre>
그런 후 hooks폴더에 usePathParam.ts라는 파일을 작성해볼게요 
hooks/usePathParam.ts
<pre><code>...
import { useLocation } from "react-router-dom";

const usePathParams = () =&gt; {
 const { pathname } = useLocation();
 return pathname;
};

export default usePathParams;</code></pre>
네 이번에는 QueryString보다 간단하죠? 
하지만 위력은 간단한것 치고 매우 쎄답니다😎.
<pre><code></code></pre>
저는 현재 <code>http://host:port/Search?searchValue=안녕하세요</code> 라는 페이지에 있어요 
여기서 PathParam을 사용한다면 
component/Search.tsx
<pre><code>...
import usePathParam from 'hooks/usePathParam';

const Search = () =&gt; {
 const pathParam: string = usePathParam();
 
 return (
 	&lt;div&gt; {pathParam} &lt;/div&gt;
 )
}

export default Search;</code></pre>
<pre><code></code></pre>
아래 사진과 같이 /Search가 잘 나오게됩니다! 
<img src="https://media.vlpt.us/images/jce1407/post/41397b7c-9c56-4c23-a8c2-ba6045dd904b/image.png">
<h3 id="마치며">마치며</h3>
오늘은 유용한 URL 관련 Hooks함수들을 알아보았는데요, 
활용할 수 있는 방법도 많고 조금만 생각하면 변형하고 추가할 수 있는 hooks들이 많으니 여러분도 유용한 hooks를 많이 만들어보세요! 
오타나 잘못된 내용있으면 댓글로 피드백 환영합니다! 
요즘 프로젝트를 진행하며 블로그쓸것들이 하나두개씩 많아지고 있어요 ㅎㅎ 
앞으로 더 많이 쓰도록 노력하겠습니다! 감사합니다:)
<h3 id="참고한-글">참고한 글</h3>
<blockquote>
<ul>
<li>https://velog.io/@jcinsh/Query-string-path-variable</li>
<li>https://ryan-han.com/post/translated/pathvariable_queryparam</li>
</ul>
</blockquote></div></div>

Clzzi.log

Clzzi

오늘은 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

React 유용한 URL Hooks

댓글