React-router-dom(리액트 라우터)에 대해서 알아보자

Home v6.26.2 | React Router

Home v6.26.2 | React Router

 

React는 SPA(single page application)로서 페이지 이동 시 기존 컴포넌트를 제거하고 새로운 컴포넌트를 렌더링하는 방식으로 작동하며, 그에 맞춰 브라우저 경로를 변경한다. 이러한 방식을 통해 전체 페이지를 새로 고치지 않고 동적으로 페이지를 변경할 수 있다.

 

React는 프레임워크가 아니라 라이브러리이므로 내장 라우팅(URL의 경로와 쿼리를 파악해 해당하는 컴포넌트를 렌더링하는 과정)을 지원하지 않는다.  페이지 간의 이동을 위하여 react-router-dom과 같은 외부 라이브러리를 사용하여 해당 기능을 사용할 수 있다. 

 

React-Router-Dom 사용하기

1. React-Router-Dom 설치하기

npm install react-router-dom

 

2. 최상위 컴포넌트에서 BrowserRouter를 import하고, <BrowserRouter>태그로 컴포넌트를 감싼다.

// main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

 

3. 해당 컴포넌트에서 사용할 url의 경로(path)를 설정한다. 

Routes와 Route를 'react-router-dom'에서 받아 사용한다. 

• <Routes>
      <Route path={"경로"} element={보여 줄 컴포넌트}/>
  </Routes>

 

아래 코드는 Home.jsx를 /home으로 About.jsx를 /about으로 설정하는 예시이다. 

import './App.css'
import Home from './components/Home'
import About from './components/About'
import { Route, Routes } from 'react-router-dom'

function App() {
  return (
    <div>
      <Routes>
        <Route path={'/home'} element={<Home />} />
        <Route path={'/about'} element={<About />} />
      </Routes>
    </div>
  )
}

export default App

 

저렇게 path가 작성하지 않아도, 홈페이지에 처음 들어갔을 때 보이는 화면의 경우에는 아래 처럼 작성하면 된다.

• <Route path={'/'} element={보여 줄 컴포넌트}/>

import './App.css'
import Home from './components/Home'
import About from './components/About'
import { Route, Routes } from 'react-router-dom'
import Intro from './components/Intro'

function App() {
  return (
    <div>
      <Routes>
        <Route path={'/'} element={<Intro/>}/>
        <Route path={'/home'} element={<Home />} />
        <Route path={'/about'} element={<About />} />
      </Routes>
    </div>
  )
}

export default App