React Router dom의 유용한 hooks들

 

안녕하세요!

오늘은 제가 프로젝트들을 진행해오면서 편리함을 느꼈던 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;

 

useParams hooks는 글 상세조회, 유저 상세조회와 같은 API를 이용해야 할 때 고유값을 잘 관리할 수 있으며, 활용하기 쉽습니다. 

지금까지 설명했던 3개의 react-router-dom hooks가 제 프로젝트들에 많은 도움이 되었던 hooks들 이었습니다. 써보지 않으셨던 분들은 한번씩 써보시는걸 추천합니다.

이상으로 글을 마치겠습니다.  긴 글 읽어주셔서 감사합니다! 😊

 

 

출처 : https://velog.io/@yiyb0603/React-Router-dom%EC%9D%98-%EC%9C%A0%EC%9A%A9%ED%95%9C-hooks%EB%93%A4