React - react-router-dom

 

 

이번 포스팅에서는 react-router-dom에 대해 알아보고자 한다. react-router-dom은 SPA 앱을 만들 때 많이 사용되는 패키지이며 특정 URI로 접근했을 때 원하는 컴포넌트를 랜더링해주기 위한 용도로 사용한다.

 

우선 VSCode 에디터에서 npm install을 이용해 react-router-dom을 설치해주도록 하자.

npm install react-router-dom

이 글을 포스팅하는 시점에서 react-router-dom의 버전은 V6 이다. 향후 버전 업이 될 경우 사용법이 조금 달라질 수 있으니 참고하도록 하자.

 

// App.js

import { BrowserRouter as Router, Link, Routes, Route } from 'react-router-dom'
import Home from './pages/home/index.jsx'
import Comment from './pages/comment/index.jsx'
import Board from './pages/board/index.jsx'
import Button from './pages/login/button.jsx'
import Login from './pages/login/index.jsx'

function App() {
  return (
    <div className="App">
      <Router>
        <ul>
          <li><Link to='/'>HOME</Link></li>
          <li><Link to='/comment'>COMMENT</Link></li>
          <li><Link to='/board'>BOARD</Link></li>
          <li>
            <Button to='/login'>LOGIN</Button>
          </li>
        </ul>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/comment' element={<Comment />} />
          <Route path='/board' element={<Board />} />
          <Route path='/login' element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

위의 코드는 App.js 파일 안에서 react-router-dom를 이용해 특정 URI로 접근했을때 원하는 컴포넌트를 랜더링하도록 만든 예제 코드이다. 우선 react-router-dom에서 제공해주는 BrowserRouter, Link, Routes, Route의 기능에 대해 짚고 넘어가도록 하자.

 

👉 BrowserRouter 

histroy API를 사용해 URL과 UI를 동기화하는 라우터이다. React에서 라우터를 사용할 경우 BrowserRouter가 최상위 컴포넌트가 된다. import { BrowserRouter as Router } from 'react-router-dom' 형식으로 많이 사용한다.

 

👉 Link 

HTML의 <a>엘리먼트와 비슷한 기능을 한다. <Link /> component의 to 속성에 설정된 링크로 이동하게 된다. 기록은 history 스택에 저장된다. 

 

👉 Routes 

<Route /> component들을 구성하는 부모 요소이다. 기존에 사용하던 Switch가 react-router V6로 넘어오면서 Routes로 이름이 변경되었다. 자식 컴포넌트인 <Route /> component 중 매치되는 첫 번째 요소를 랜더링하게 된다. <Routes /> component의 children으로 <Route /> component들을 넣어서 사용하게 된다.

 

👉 Route 

props로 path 와 element를 갖는다. path 속성에는 경로를, element 속성에는 component를 넣어준다. <Route />의 path 속성에 설정된 URI와 현재 경로가 일치하면 element 속성값에 해당하는 컴포넌트 혹은 함수를 랜더링 한다.

 

 

추가로 react-router-dom 에서 제공해주는 useNavigate Hook을 사용해보기 위해 <Link /> component가 아닌 LOGIN버튼을 이용해서 Login page로 이동이 가능하게끔 만들어 보았다.  

👉 useNavigate 

useNavigate Hook을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다. 반환하는 함수를 navigate 변수에 저장한 후 navigate의 인자값으로 path를 넘겨주면 해당 경로로 이동이 가능해진다. <Link /> component와 다른 점은 함수 호출을 통해 페이지를 이동하기 때문에 특정 조건을 충족할 경우에만 페이지 이동을 하도록 처리할 수 있다. 즉, 페이지 전환시 추가로 처리해야 하는 로직이 있을 경우 useNavigate을 사용해서 처리해주면 된다.

 

아래의 코드는 App.js에서 import 해 온 button.jsx 파일이다.

// button.jsx 파일

import { useNavigate } from 'react-router-dom'

const Button = ({children, to, ...rest}) => {

    const navigate = useNavigate()

    const navBtn = e => {
        if (to) {
            navigate(to)
        }
    }

    return (
        <button onClick={navBtn}>
            {children}
        </button>
    )
}

export default Button;

App.js 파일에서 <Button /> component의 props로 to 속성을 전달하고 있기 때문에 Button 함수에서 to의 속성값으로 들어간 경로를 navigate( ) 함수의 인자값으로 전달하였다. 이제 <button>엘리먼트로 만든 LOGIN 버튼을 클릭할 때마다 <Link to='/login'>LOGIN</Link>과 동일한 효과를 부여할 수 있다.