TIL) 리액트, React Router, 리액트 라우터, React SPA 개발, BrowserRouter, Routes, Route, Link

 

컴포넌트 나누는 것에 대해 왜 고민이 필요한가요??

 

➥ 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계해야 하기 때문에

 

 

React를 이용해 어떻게 애플리케이션을 만들지 설계를 한다면 페이지를 만들기 전에, 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상할 계획을 짜야한다!!

---

<React Router 이용해서 React SPA(Single-Page Application) 개발하기>

 

SPA는 하나의 페이지를 가지고 있지만, 한 종류의 화면만 사용하지 않는다.

 

WHY? 🤔

페이지 안의 버튼을 누르면 각 버튼에 대한 페이지 화면이 필요하니까!

또한 이 화면에 따라 '주소'도 달라진다!

 

라우팅(Routing) = 다른 주소에 따라 다른 뷰를 보여주는 과정 / 경로에 따라 변경한다. 

 

BUT😬

React 자체에는 이 기능이 내장되어 있지 않다. 그래서 우리가 직접 주소마다 다른 뷰를 보여줘야한다. 

 

👇 React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다. 

 

---

React Router의 주요 컴포넌트

<BrowserRouter> = 라우터 역할을 한다. 

<Routes> = 경로를 매칭해준다. 

<Route> = 경로를 매칭해준다. 

<Link> = 경로를 변경해준다. 

 

👇 이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 한다. 

 

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

 

import는 필요한 모듈을 불러오는 역할을 한다. (비구조화 할당(destructuring assignment)과 비슷하게 이용할 수 있다. )

 

 

---

React Router 사용 환경 세팅

1. react-router 라이브러리 설치

npx create-react-app simpleroute // simpleroute 폴더에 React App 설치
cd simpleroute

npm install react-router-dom@^6.3.0 // react-router 라이브러리 설치

 

2. App.js로 react-router 컴포넌트 꺼내오기

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

export default function App() {
	return (...)
}

 

---

<주소에 따라 페이지 뷰 다르게 만들기>

 

App.js 에 라우팅을 하기 위한 React Router의 주요 컴포넌트를 세팅하기!

이 컴포넌트를 이용해서 우리가 원하는 "주소에 따른 다른 페이지"를 구현할 수 있다.

BrowserRouter

<BrowserRouter> 컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다. 또한 <BrowserRouter> 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있다.

(tip)

브라우저라우터는 react-router-dom 안에 있는 그 무엇보다 위에만 있으면 되는거다. 

👇

ReactDOM의 렌더 단계인 index.js 에 <BrowserRouter>를 넣어서 활용할 수도 있다.

 

 

👇예시 1) index.js (React Version 18 기준)

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

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

 

👇예시 2) index.js (React Version 17 기준)

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

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));

---

Routes, Route

경로를 매칭해주는 역할을 하는 컴포넌트이다.

 

• <Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 한다. <Routes> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
• <Route> 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정한다.  <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.

<Route> 태그 안에 element 속성으로 연결하고자 하는 컴포넌트를 넣어준다.

 

팁 : 만약 사용자가 지정된 주소인 “/’, “/mypage”, “/dashboard” 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있다.

이럴 때 path=”*” 으로 설정하면, 지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여주게 된다.

 

function App () {
  return (
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>

    {/* 주소 경로와 아까 만든 3개의 컴포넌트를 연결해 줍니다. */}
       {/* Routes 컴포넌트는 Route 컴포넌트들을 감싸고 있어야 합니다. */}
        <Routes>
          {/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
   </BrowserRouter>
  )
}

export default App;

 

---

Link

경로를 연결해 주는 역할을 하는 컴포넌트이다.

페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해준다.

 

React Router에서 <a> 요소가 아닌 <Link>를 사용하는 이유??

➥ <a> 요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킨다. (새로고침 현상)

하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있다.

 

• <Link> 의 to 속성을 활용하여 <Route> 컴포넌트에 설정해 준 path 주소를 연결해준다.

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<Home />} /> 
					{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;