[React] react-router-dom에 대해 알아보자 - 화면 전환

---

 

■ react-router-dom 설치 방법

■ 기본 사용법

---

 

안녕하세요. 🫤

오늘은 react-router-dom의 사용법에 대해 포스팅하려고 합니다.

 

React는 SPA(Single Page Application)이기 때문에 새로고침 없이 페이지를 전환하려면 라우팅 라이브러리가 필요합니다. 그 역할을 하는 것이 바로 react-router-dom입니다 !! 

 

이번 글에서는 간단하게 페이지를 이동하는 방법에 대해 알아보겠습니다 !

---

■ react-router-dom 설치 방법

react 프로젝트를 열고, 터미널에 해당 명령을 적어주면 끝입니다. 아주 간단하죠 ~~ 

npm install react-router-dom

---

■ react-router-dom  기본 사용법

네비게이션 바에 있는 메뉴를 누르면 해당 페이지로 이동하는 코드를 단계별로 설명해보도록 할게요 !

 

1단계: BrowserRouter로 앱 감싸기

2단계: Routes와 Route 추가하기

3단계: Link로 페이지 이동하기

---

1단계: BrowserRouter로 앱 감싸기

⭐️  <BrowserRoute />는 앱 전체를 감싸는 라우터입니다.

- 최상위 컴포넌트에서 감싸야 라우터가 정상 동작하는 점 유의해주세요 ! 

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

function App() {
  return (
    <BrowserRouter>
      {/* 라우터 안에 컴포넌트들이 들어갈 예정 */}
    </BrowserRouter>
  );
}

export default App;

---

2단계: Routes와 Route 추가하기

⭐️ <Route />는 URL 경로(path)와 컴포넌트를 연결하는 역할을 합니다.

- 사용자가 특정 URL로 접근했을 때 어떤 컴포넌트를 보여줄지 정의하는 것이 Route입니다.

<Route path="URL경로" element={<컴포넌트 />} />

 

- path: URL 주소를 지정

- element: 해당 URL일 때 화면에 보여줄 컴포넌트를 지정합니다.

---

⭐️ <Routes />는 여러 개의 <Route />를 감싸서 관리하는 부모 컴포넌트입니다.

- URL에 따라 맞는 <Route />를 찾아서 하나만 렌더링 하는 역할을 합니다.

- v6부터 <Switch />에서 <Routes />로 변경됨

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

---

아래 코드를 보면 <BrowserRouter>안에 <Routes />가 있고, <Routes />는 여러 <Route />를 묶어 관리하고 있습니다.

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>홈 페이지입니다!</h2>;
}

function About() {
  return <h2>소개 페이지입니다!</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

---

3단계: Link로 페이지 이동하기

⭐️  <Link />는 react router dom에서 페이지를 부드럽게 이동하도록 도와주는 컴포넌트입니다.

- 새로고침 없이 페이지가 전화되므로, 사용자 경험이 훨씬 좋아집니다.

 

<Link to="/">홈</Link>
<Link to="/about" onClick={() => console.log('링크 클릭!')}>소개</Link>

 

기본 <a> 태그 대신 <Link> 컴포넌트를 사용하면 새로고침 없이 이동할 수 있습니다.

구분	<a> 태그	<Link> 컴포넌트
속성	href="/"	to="/"
사용 목적	일반적인 하이퍼링크	React SPA 내 라우팅
장점	범용 사용 가능	빠른 네비게이션, 히스토리 관리

---

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>홈 페이지입니다!</h2>;
}

function About() {
  return <h2>소개 페이지입니다!</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link> | <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

---

 

오늘은 간단하게 react-router-dom 사용방법에 대해 알아봤습니다 !

다음 포스팅에서 useNavigate Hook에 대해 알아보도록 합시다~ 

---