react-router-dom

 

이번엔 react-router-dom에 대해서 알아보고자 한다.

 

react-router-dom은 SPA앱을 만들 때 주로 많이 사용되는 패키지로 특정 URI로 접근했을 때 원하는 컴포넌트를 랜더링해주기 위한 용도로 사용된다.

 

 

그러면 react-router-dom의 사용법에 대해서 알아보도록 하자.

 

 

먼저 npm에서 설치를 진행하자

npm install react-router-dom

 

설치가 완료가 되면 App.js에서 import문에 다음과 같이 내용을 추가해주도록 하자.

 

import {BrowserRouter as Router, Link, Routes, Route} from 'react-router-dom'

 

import를 이용해서 react-router-dom에서 제공해주는 BrowserRouter, Link, Routes, Route의 기능에 대해서 알아보도록 하자.

 

 

BrowserRouter :

history API를 사용해 URI와 UI를 동기화하는 라우터이다. React에서 라우터를 사용할 경우 BrowserRouter가 최상위 컴포넌트로 가서 사용된다. 대부분 import {BrowserRouter as Router}를 통해서 Router로만 표기해서 사용하고 있다.

 

 

Link : 

HTML에서 사용하는 <a> 엘리먼트와 비슷한 기능을 가지고 있다. <Link> component의 to 속성에 설정된 링크로 이동하게 할 수 있는 기능을 가지고 있다.

 

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를 이용해서 만든 예제 코드이다.

import {BrowserRouter as Router, Link, Routes, Route} from 'react-router-dom'
import Index from './pages/index'
import Counter from './pages/counter'
import Comment from './pages/comment'
import Login from './pages/login'
import Header from './components/common/header'

function App() {
  return (
   	<>
      	<Router>
            <ul className="menu">
                <li><Link to ="/">HOME</Link></li>
                <li><Link to ="/counter">counter</Link></li>
                <li><Link to ="/comment">comment</Link></li>
                <li>
                    <Button to="/login">Login</Button>
                </li>
            </ul>
        <Routes>
            <Route path="/" element={<Index />}/> 
            <Route path="/counter" element={<Counter />}/>
            <Route path="/comment" element={<Comment />}/>
            <Route path="/login" element={<Login />}/>
        </Routes>
      </Router>
    </>
  );
}

export default App;

 

추가로 react-router-dom에서 제공해주는 useNavigate에 대해서 알아보기 위해 로그인 버튼을 <Link> component가 아닌 useNavigate를 활용해서 버튼을 눌렀을 때 로그인 페이지로 갈 수 있게 설정을 해볼 것이다.

 

 

먼저 useNavigate에 대해서 알아보도록 하자

 

 

useNavigate : 

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

 

 

아래의 코드는 App.js에서 import해온 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>과 동일한 효과를 부여할 수 있다.

 

 

 

 

참고 사이트 : https://bitkunst.tistory.com/entry/React-react-router-dom