React Router v6를 사용하여 ReactJS로 클라이언트 측 라우팅을 손쉽게 구현하는 방법

이 가이드를 사용하려면 먼저 작동하는 React 앱이 있거나 이 데모를 따라해야 합니다.

클라이언트 측 라우팅 및 React Router란 무엇인가요?

클라이언트 측 라우팅은 프런트 엔드(또는 클라이언트)로 렌더링되는 JS 파일 내부의 경로에 대한 내부 처리입니다.

React Router는 React의 표준 라우팅 라이브러리입니다.

시작하기

라우팅하려는 페이지의 상위 구성 요소에서 BrowserRouter 및 Route, Routes from React Router를 가져옵니다.

import { BrowserRouter, Route, Routes } from "react-router-dom";

다음으로 사용할 구성 요소 주위에 BrowserRouter를 렌더링합니다. 이 예에는 Home, About 및 Topics 구성 요소가 있습니다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const Example = () => (
<BrowserRouter>
  <Home/>
  <About />
  <Contact />
</BrowserRouter>
)

이제 경로로 래핑합니다. 이는 React Router v6의 새로운 기능입니다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const Example = () => (
<BrowserRouter>
  <Routes>
    <Home/>
    <About />
    <Contact />
  </Routes>
</BrowserRouter>
)

좋습니다. 이제 버튼을 클릭할 때마다 실제로 이러한 구성 요소로 라우팅하려는 경우입니다. (물론 다른 이벤트도 있습니다). 이렇게 하려면 라이브러리에서 경로를 가져오고 구성 요소를 경로에 소품으로 전달합니다.

또한 라우팅할 원하는 경로가 포함된 문자열을 전달해야 합니다. 앱의 기본 또는 "홈"구성 요소에 대해 "/"를 사용하는 것이 좋습니다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const example = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="/about" element={<About />} />
      <Route path="/about/contact" element={<Contact />} />
    </Routes>
  </BrowserRouter>
)

이제 정의한 경로를 사용하여 이러한 구성 요소에 연결할 수 있습니다. 엄청난!

앱에 경로 통합

이러한 구성 요소에 연결하는 데 사용하려는 버튼이 있는 경우 라우팅하려는 구성 요소의 라이브러리에서 링크를 가져오기만 하면 됩니다.

여기에서는 일반 텍스트가 작동하지만 조금 더 멋지게 보이도록 Button 구성 요소를 추가하기로 했습니다. 이제 모든 것을 연결하는 구성 요소를 만들었으므로 루트 구성 요소로 가져오고 구성 요소를 BrowserRouter 내부에 배치하여 Example 내부에서 렌더링하기만 하면 됩니다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
export const Example = () => (
  <BrowserRouter>
    <Buttons/>
    <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="/about" element={<About />} />
      <Route path="/about/contact" element={<Contact />} />
    </Routes>
  </BrowserRouter>
)

구성 요소 내부에 있는지 확인하고 싶지만 라우팅할 구성 요소가 아니라 버튼일 뿐이므로 내부에 필요하지 않습니다.


이제 ButtonContainer에서 버튼을 클릭할 때마다 연결된 구성 요소가 렌더링됩니다. 그리고 다른 버튼을 클릭할 때마다 이전 구성 요소가 마운트 해제되고 연결된 다음 구성 요소가 렌더링됩니다.

마지막으로

이는 페이지 리디렉션과 거의 비슷하지만 웹 서버에서 HTML을 검색하거나 불필요한 구성 요소를 다시 렌더링할 필요가 없기 때문에 더 빠릅니다.
이것이 React Router의 힘입니다!


이 기사에서 우리는 React Router v6를 사용하여 React에서 기본 클라이언트 측 라우팅을 구현하는 방법을 배웠고 그것이 얼마나 간단한지 발견했습니다!
Nested Routing에 관심이 생겼습니다. React Router에 대한 다른 기사를 보고 싶다면 댓글을 남겨주세요! 행복한 코딩!!!