React Router dom의 유용한 hooks들 📃

yiyb0603·2021년 2월 3일

React hooks react router dom useHistory useLocation useParams

React

목록 보기

7/15

안녕하세요! 오늘은 제가 프로젝트들을 진행 해오면서 편리함을 느꼈던 react-router-dom의 유용한 hooks들에 대해서 소개하려고 합니다. 리액트 라우터가 웹 내에서 단순 페이지 라우팅을 하기도 하지만 URL에서의 도움을 많이 주는 라우터 라이브러리라고 생각합니다.

아래에는 총 3가지의 hooks들이 있습니다. react-router-dom 5.1v 부터 hooks들이 지원이 됩니다.

react-router-dom을 설치하는 과정은 두개중 하나를 선택하여 터미널에 입력합니다
1. yarn add react-router-dom
2. npm install react-router-dom

1. useHistory

대부분의 react-router-dom을 이용한 리액트 프로젝트의 App.tsx는 아래와 같습니다.

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from 'components/Home';

const App = (): JSX.Element => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/' component={Home} />
      </Switch>
    </BrowserRouter>
  );
};

export default App;

Home을 컴포넌트로 지정하고 있는 Route 태그의 부모 요소인 BrowserRouter, Switch에 의해서 Home 컴포넌트의 defaultProps 에는 history 객체가 들어가게 되고, 이 history 객체를 이용하여 리액트 어플리케이션 내에서 라우팅이 가능합니다.
그리고 history 객체를 사용하기 위해서는 withRouter hoc를 이용하여 컴포넌트를 감싸주어야 작동을 합니다.

아래는 예시 코드입니다.

import React from 'react';
import { withRouter } from 'react-router-dom'; 

const Home = ({ history }) => {
  return (
    <div onClick={() => history.push('/auth')}>Hello!</div>
  );
};

export default withRouter(Home);

🤔 그러나 만약 컴포넌트에 Redux나 Mobx를 이용한 store 이용으로 인해서 withRouter 말고도 다른 hoc들이 컴포넌트를 감싸게 된다면 어떻게 될까요? 허나 history 객체는 잘 작동이 된다고 하더라도, 스토어 관리쪽에서 hoc 충돌로 인하여 작동하지 않을 수 있습니다.

또한 TypeScript + React를 이용하여 하시는 분들은 history 객체의 타입을 지정할때도 어려움을 겪기도 합니다.

위의 두가지 문제를 해결해주는 react-router-dom hooks가 바로 useHistory라는 hooks 입니다. 이 useHistory는 일반적인 history 객체와 똑같은 객체를 가지므로 사용법이 동일하며, 사용하기 위한 준비단계는 거의 없습니다. ( withRouter hoc를 사용하지 않아도 됩니다. )
아래는 useHistory를 사용하는 예시의 코드입니다.

import React from 'react';
import { useHistory } from 'react-router-dom';

const Home = (): JSX.Element => {
  const history = useHistory();
  // history를 props에서 얻어왔을 때 처럼 동일하게 사용 가능하다.
  
  return (
    <div onClick={() => history.push('/auth')}>
      <div>Hello!</div>
    </div>
  );
};

export default Home;
// withRouter hoc가 필요없다.

2. useLocation

useLocation hooks는 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks 입니다.
이 hooks는 defaultProps 하나인 location 객체를 대체 하는 react-router-dom hooks 입니다.

import React from 'react';
import { useLocation } from 'react-router-dom';

const Home = (): JSX.Element => {
  const location = useLocation();
  console.log(location);
  
  return (
    <></>
  );
}

export default Home;

위의 코드에서 console.log(location)을 실행하면 어떤 정보들이 나올까요? 여러가지 정보들이 출력되는데, 대표적인 객체로는 pathname과 search라는 객체가 출력됩니다.

pathname은 만약 웹 url이 http://localhost:3000/home?keyword=리액트 이라고 가정했을때, 쿼리스트링을 제외한 /home이 출력 됩니다.

search는 쿼리스트링을 분석해야하는 상황에서 유용합니다. 앞에서 pathname이 출력했던 부분을 제외한 쿼리스트링이 출력되며, 결과는 ?keyword=리액트 라는 출력결과가 나옵니다. 출력된 값은 query-string이라는 쿼리스트링 파싱 라이브러리를 이용하여 제대로 된 값을 얻어낼 수 있습니다.

import React from 'react';
import { useLocation } from 'react-router-dom';
import queryString from 'query-string';

const Home = (): JSX.Element => {
  const { search } = useLocation();
  // search: ?keyword=리액트
  
  const { keyword } = queryString.parse(search);
  // keyword 출력결과: "리액트"
  
  return (
    <></>
  );
}

export default Home;

3. useParams

useParams는 앞서 말했던 useLocation과 유사한 hooks이기도 합니다. 왜냐하면 useLocation은 쿼리스트링 정보를 얻는데 유용하다고 하면, useParams는 path parameter의 정보를 얻을 수 있는 hooks이기 때문입니다.

먼저, useParams를 사용하기 위해서 동적 라우팅 설정을 해주어야 합니다. 설정법은 App.tsx에서 다음과 같이 내용을 추가해주시면 됩니다. 🖊🖌

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from 'components/Home';

const App = (): JSX.Element => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/home/:id' component={Home} />
        {/* id라는 동적 라우팅값을 걸어주었다. */}
      </Switch>
    </BrowserRouter>
  );
};

export default App;

: (콜론)을 이용하여 다음과 같이 설계해놓으면, /home/ 뒤에 1이 오든, 2가 오든, 혹은 문자열이 오든 상관없이 라우팅이 정상 작동됩니다.

이제 Home 컴포넌트에서 path parameter ( 동적 라우팅 값 )을 읽어오도록 하겠습니다.
기존에는 match props를 이용하여 match.params.id의 형식으로 접근을 해야 했지만, useParams를 이용하면 좀 더 간단하게 접근 가능합니다.

import React from 'react';
import { useParams } from 'react-router-dom';

const Home = () => {
  const { id } = useParams();
  // 동적 라우팅 값으로 걸어둔 이름으로 객체를 가져올 수 있다.
  
  // 현재 주소의 값이 http://localhost:3000/home/3 일때
  console.log(id); // "3"이 출력된다.
  
  return (
    <></>
  );
};

export default Home;