개인적으로 React에서 라우팅을 할 때 요긴하게 쓸 수 있는
Hooks 2가지를 소개 해보겠습니다.
- useLocation
- useMatch
🪝 useLocation 이란?
우리는 보통 리액트에서 브라우저의 URL에 따라 Route 해주고
또 클라이언트의 URL 경로를 UI로 지정해 주기 위해 Link를 사용하여
이동 시켜줍니다.
그런데 만약!! Link를 사용하여 페이지를 전환할 때 특정 데이터도 함께 넘기고 싶은 상황이고 URL 처럼 클라이언트에게 보이면 안 되는 은밀한 데이터라면 어떻게 하실 건가요?
이때 가장 sexy하게 사용할 수 있는 요긴한 녀석이 useLocation 입니다!
useLocation은 Link에서 설정한 to 경로 페이지에서 사용할 수 있고
Link에서 넘겨줄 때에 to 말고도 state라는 props를 하나 더 추가할 수 있는데 여기에 데이터를 넣주면 같이 넘겨줄 수 있습니다.
🛠️ useLocation 사용법
- 우선 state 속성으로 전달해 줄 오브젝트를 할당 해야함
/* 예시로 "name" key의 coin.name value 값의 리터럴 오브젝트를 할당함 */
<Link to={`/${coin.id}`} state={{ name: coin.name }}>- Link 에서 to 경로로 지정한 페이지 컴포넌트에서 useLocation을 사용하자
정말 쉽게 location.state."ObjectKeyName" 으로 받아 올 수 있음 ㅎㅎ
const location = useLocation();
/* location.state.name 으로 아주 심플하게 받아올 수 있다. */단, useLocation 사용시 주의 할 점은 Link로 전달 해주는 값을 받는 것이므로 해당 Link가 있는 UI를 거치지 않고 URL로 접속하면 state 값을 전달 받을 수 없기 때문에 예외 처리 를 생각 해줘야 함!
/* EX code) state가 없다면 "Loading..." 텍스트 띄우기 */ location.state?.name || "Loading..."
🦈 useMatch() 훅이란?
굉장히 심플한 훅임
현재 URL과 useMatch()의 인자로 받는 경로가 일치하는지 확인 후 일치하다면 URL과 관련된 정보가 담긴 Object 가 반환되고, 일치하지 않는 다면 null 을 반환하는 훅!
사용 예로 현재 사용자의 경로가 "/:coinId" 이고
뒤에 /price가 오면 price tab 컴포넌트를 활성화하는 경우에
const priceMatch = useMatch("/:coinId/price");
{ priceMatch !== null ?
(<Tab>
<Link to={`/${coinId}/price`}>Price</Link>
</Tab>)
:
null
}>
간단하게 원하는 경로 "/:coinId/price"를 useMatch의 인자로 넣어주어
Object가 반환되면 현재 경로가 지정한 경로와 같은 것이므로 Tab 컴포넌트를
활성화하고 null이라면 null을 반환한다.
수고 하셨습니다. 배운 sexy한 hooks를 지리게 사용해 봅시다.
