[React] react-router 의 location 객체 알아보기

안녕하세요. 

React Router를 이용하여 페이지를 개발할 때 URL을 이용하여 할 수 있는 작업은 매우 다양한데요.

다음과 같은 작업들을 할 수 있습니다. 

• url Parameter로 호출할 api 의 id 값 받아오기 
• url parameter로 특정 컴포넌트를 보여주기
• location state 으로 현재 페이지에 상태값 전달 및 받아오기
• history 객체를 이용하여 새로운 페이지로 이동하기 
• 등등

오늘은 React Router 에서 제공하는 location 객체에 대해서 알아볼 것입니다! 

 

Location 이란?

React Router 라이브러리에서 제공하는 location 객체는 현재의 URL 정보를 나타냅니다. 

(참고로 web api 의 location 과는 다른 객체입니다. history 객체도요!)

url path 정보와 query, 그리고 state 등을 가지고 있죠. 

location 객체는 다음과 같이 생겼습니다. 

{
  key: 'ac3df4',
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}​

 

Location 객체를 사용할 수 있는 곳 

여기서 신경써야 할 점은 location 객체는 특정 장소에서만 제공됩니다. 

• Route Component 
  • Route 컴포넌트에서 다음과 같이 component props에 의해 렌더링된 컴포넌트에서 props 로 사용합니다. 
  • <Route path="/:myId component={MyComponent}"/>
• Route render
  • Route 컴포넌트에서 render props에 전달된 함수에서 props로 사용합니다. 
  • <Route path="/:myId"/ render={({ location }) => // do something }>
• Route children 
  
  • Route 컴포넌트에서 children props에 전달된 함수에서 props로 사용합니다. 
  • <Route path="/:myId"/ children={({ location }) => // do something }>
• withRouter 
  
  • Route 컴포넌트에 의해 렌더링된 컴포넌트가 아니어도 withRouter 고차함수에 의해 렌더링 된 컴포넌트에서 사용할 수 있습니다. 

위와 같이 특정위치에서만 사용할 수 있는 이유는 Router 컴포넌트에서 React의 context 로 location 객체를 전달하고 있기 때문입니다.

 

useLocation Hook

react router 라이브러리에서 제공하는 훅 중에는 useLocation 훅이 있는데요.

해당 훅을 사용하면 Router 컴포넌트에서 context 로 제공하는 location 객체를 가져올 수 있습니다!

 소스코드는 다음과 같습니다! 

export function useLocation() {
 // some code

  return useContext(RouterContext).location;
}

여기서 주목할 점이 있습니다. useLocation 훅을 사용해보신 분이라면 아시겠지만, useLocation 훅을 사용한 컴포넌트는 url 이 변하면 재렌더링 됩니다. 

그 이유는 Router 컴포넌트에서 location 객체를 state로 가지고 있고, url 변화이벤트를 감지하여 state를 바꿔주기 때문입니다. 즉 url 변화 -> Router 컴포넌트의 state 변화 -> Router 컴포넌트 리렌더링 -> RouterContext 의 value 값 변화 -> useLocation 훅을 사용한(RouterContext 를 사용한) 컴포넌트 리렌더링 의 순서로 동작합니다. 참고하시면 좋을 것 같네요!

 

마무리하며

오늘은 react router 라이브러리의 location 객체를 확인해보았는데요. 개인적으로 궁금했던 부분을 정리한 느낌이라 크게 유용한 내용은 아닙니다만..! 다음엔 조금 더 재밌는 내용을 포스팅 해보도록 하겠습니다. . 최근 버전의 react router 는 useRouteMath 훅 등의 유용한 기능을 포함하고 있으니 궁금하신 분들은 다른 명세들도 함께 찾아 보길 바랍니다!