React-Router-Dom

React-Router 란?

React는 자바스크립트 라이브러리이며 SPA(Single Page Application) 방식을 사용합니다. 이는 여러개의 페이지를 사용하며, 새로운 페이지를 항상 로드하는 기존의 MPA(Multi Page Application) 방식과는 달리 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가집니다.

기존의 MPA 방식에서 다른 페이지로 이동하기 위해선 <a href='페이지 경로'> 태그를 사용하거나 window.location.href='페이지 경로' 등의 메소드를 사용할 수 있습니다.

하지만 SPA 방식에서는 오직 하나의 페이지만 가지고 있기 때문에 MPA 방식으로의 페이지 이동은 불가능합니다. HTML이 아닌 데이터를 가지고 있는 JS 파일로 구성이 되어 있기 때문입니다.

이러한 상황속에서 React-Router는 선택에 따라 선택된 데이터를 하나의 페이지 내에서 렌더링 해주는 라이브러리 입니다.

• React-Router (웹/앱)
• React-Router-Dom (웹)
• React-Router-Native (앱)

React-Router-Dom 기본 사용

npm install react-router-dom

yarn add react-router-dom

위의 두 방법중 하나의 방식으로 선택하여 라이브러리를 설치합니다.

설치가 완료 된 후

src/index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

트리의 가장 최상단인 index.js 에서 BrowserRouter로 감싸줍니다.

src/App.js

import { Routes, Route, Outlet } from 'react-router-dom'

const Layout = () => {
  return (
    <div>
      <Nav />

      <Outlet />

      <Footer />
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<MainPage />} />
          <Route path="movie/:id" element={<DetailPage />} />
          <Route path="search" element={<SearchPage />} />
        </Route>
      </Routes>
    </div>
  )
}

App.js안에 Routes를 사용하고 그 안에 Route를 사용하여 라우팅 되는 주소와 이동하고자 하는 페이지와 렌더링 할 컴포넌트를 정의한다.
위의 코드를 보면 MainPage는 path 대신 index를 사용하고 있는데 이는 기본으로 설정된 페이지라는 뜻이다.
계속 보여져야 하는 컴포넌트는 Routes 밖에 추가하여 사용하거나 필자처럼 위의 방식을 사용해서도 가능하다.

React-Router-Dom 경로 이동

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

const Nav = () => {
  const navigate = useNavigate()
  
  return (
	<nav>
      // Link 사용
      <Link to="search">검색페이지 이동</Link>
      
      // useNavigate 사용
      <button onClick={() => navigate('search')}>검색페이지 이동</button>
    </nav>
  )
}

위의 두 가지 방식으로 경로를 이동 할 수 있다.

React-Router-Dom 파라미터

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

const DetailPage = () => {
	const { params } = useParams()
    
  	return (
    	<div>parameters : {params}</div>
    )
}

특정 경로에서 파라미터 값을 전달 받았을 때 값을 확인하기 위해서는 useParams를 임포트하여 사용하면 된다.

React-Router-Dom 중첩 라우트

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<MainPage />} />
          <Route path="movie/:id" element={<DetailPage />}>
            <Route path="video" element={<VideoPage>} />
          </Route>
          <Route path="search" element={<SearchPage />} />
        </Route>
      </Routes>
    </div>
  )
}

위의 코드에서 DetailPage 부분을 보면된다.

위의 중첩 라우팅을 할 때 DetailPage 컴포넌트 안에 VideoPage가 나올 수 있는 Outlet을 만들어줘야 VideoPage가 DetailPage 내에서 정상적으로 보여질 수 있다.