useLocation()

react-router-dom (v5.3.0 기준) useLocation hook은 동적인 현 위치의 객체를 반환한다.

 

<Fig. 1>

 

무엇보다, useLocation을 사용하는 주된 내용은 페이지 전환시 데이터를 보낼 수 있다는 것이다.

<Fig. 1>을 보면  state에 객체가 들어가 있는데, 이 객체에 이전 페이지에서 보내고 싶은 데이터를 담아 다음 페이지로 보내면, useLocation을 통해 보낸 데이터를 받을 수 있다.

 

이 방법을 이용하면, 로딩 중에도 특정 데이터는 사용자에게 보여줄 수 있기 때문에 사용자 경험이 증대된다.

 

 

데이터를 보내는 방법은 아래의 코드를 참고하자.

// Coins.tsx

<Link to={{ pathname: `/${coin.id}`, state: { name: coin.name },}}>

// Coin.tsx

const { state } = useLocation<RouteState>();

Coins.tsx에서 Link to를 통해 state 키 안에 객체 데이터를 담을 수 있다. 

위 경우에는 key: name, value: <코인 이름>이 담겨져 있다.

그럼 Coin.tsx에서 useLocation를 이용해 state를 구조분해할당을 통해 받으면,

state.name로 <코인 이름> 데이터에 접근할 수 있다.

 

 

공식 문서

React Router | useLocation

 

 

요약

---

<Link to={{ state: { key: value }, }}>  =>  useLocation()  =>  state.key===value