[React] 리액트 라우터로 SPA 개발하기

1. 프로젝트 생성, 라이브러리 설치 및 적용

📍 react-router-dom 라이브러리 설치

npm install react-router-dom

---

• 프로젝트에 리액트 라우터 적용하기

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom"; // BrowserRouter 임포트 추가
import "./index.css";
import App from "./App.jsx";

 createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter> // BrowserRouter 컴포넌트로 감싸주기 
      <App />
    </BrowserRouter>
  </StrictMode>
);

✅ BrowserRouter 임포트 추가하고 src/main.jsx 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용해 감싸주면 됨.

이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해 줌.

2. 페이지 만들기

라우트로 사용할 페이지 컴포넌트를 만들 차례!

• 사용자가 웹 사이트에 들어왔을 때 맨 처음 보여 줄 Home 컴포넌트

  • Home.jsx

     import React from "react";
    
    const Home = () => {
     return (
       <div>
         <h1>홈</h1>
         <p>홈, 그 페이지는 가장 먼저 보여지는 페이지.</p>
       </div>
     );
    };
    
    export default Home;
    

    
    

• 웹 사이트를 소개하는 About 컴포넌트

  • About.jsx

    import React from 'react';
    
    const About = () => {
       return (
           <div>
               <h1>소개</h1>
               <p>이 프로젝트는 리액트 라우터 기초를 실습해 보는 예제 프로젝트입니다.</p>
           </div>
       );
    };
    
    export default About;

    
    

2-1. Route 컴포넌트로 특정 주소에 컴포넌트 연결
Route라는 컴포넌트를 사용해서 사용자의 현재 경로에 따라 다른 컴포넌트를 보여주자!
Route 컴포넌트를 사용하면 어떤 규칙을 가진 경로에 어떤 컴포넌트를 보여 줄지 정의할 수 있다.

📍 사용 방식

// 예시
import { Routes, Route } from "react-router-dom";   // 임포트 
  <Routes> 
    <Route path="주소규칙" element={<보여 줄 컴포넌트 />} />
  </Routes>  

• App.jsx

  import React from "react";
  import { Routes, Route } from "react-router-dom";
  import "./App.css";
  import About from "./About";
  import Home from "./Home";
  
  const App = () => {
   return (
     <div>
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     </div>
   );
  };
  
  export default App;
  

  
  

• main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom"; // BrowserRouter 임포트 추가
import "./index.css";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    {/* BrowserRouter 컴포넌트로 감싸주기  */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

(+) react-router-dom 버전이 6 이상인 경우...
exact가 필요없어짐!

2-2. Link 컴포넌트를 사용하여 다른 주소로 이동하기

📍 Link 컴포넌트
클릭하면 다른 주소로 이동시켜 주는 컴포넌트

• 페이지 내에서 다른 경로로 네비게이션을 처리할 수 있는 방법을 제공하며, 페이지가 새로 고침되지 않고 경로만 변경 됨.

---

📍 Link 컴포넌트 사용 방법

// 예시
<Link to="주소">내용</Link>

• Link 컴포넌트를 사용해 페이지를 전환하면 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용해 페이지의 주소만 변경해 줌.
• Link 컴포넌트 자체는 a 태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장되어 있음.

• App.jsx
  App 컴포넌트에서 "/", "/about" 경로로 이동하는 Link 컴포넌트를 만들기.

import React from "react";
import { Routes, Route, Link } from "react-router-dom"; // Link 사용 임포트
import "./App.css";
import About from "./About";
import Home from "./Home";

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};

export default App;

홈이랑 소개 링크 눌러보면 각 페이지로 잘 전환되는 것을 볼 수 있다!

3. Route 하나에 여러 개의 path 설정하기

• 여러 개의 path에 같은 컴포넌트 보여주기

  • 예전 버전 👉 Route를 두 번 사용

    const App = () => {
    return (
      // 예전 버전
      <div>
        <Route path="/" component={Home} exact={true} />
        <Route path="/about" component={About} />
        
        // Route를 두 번 사용하는 대신 path props를 배열로 설정
        <Route path={["/about", "/info"]} component={<About />} />  // 
      </div>
      
    // 현재 버전
    // exact => 지금은 사용 X
    // component => 지금은 element로 작성함! 
      // element={<About />} 요렇게~
    // <Route path>도 이제는 <Routes>로 감싸줘야 함!  
    // 이제는 배열 사용 X    
      {/* 
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/info" element={<Info />} />
        </Routes>
      */}  
    );
    };

    
    

  • Route를 두 번 사용하는 대신 path props를 배열로 설정

    왜 안될까............................ 물어봐야지
    이제는 배열이 안된다고 한다.... (맞겠지?)

        <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
           <Route path="/info" element={<Info />} />
           {/* <Route path={["/about", "/info"]} element={<About />} /> */} 
           {/* 이제는 또 배열 안된다네... */}
         </Routes>