[React] React-Router-Dom

1️⃣ Routing 이란?

출처 : 생활코딩 블로그

 

라우팅이란 네트워크에서 경로를 선택하는 프로세스를 의미합니다.

요청 들어온 여러가지 주소에 알맞는 곳으로 이동시켜주는 것이라고 말할 수 있습니다.

 

---

 

2️⃣ React-Router를 사용하는 이유

 

react-router를 사용하지 않고 그냥 태그를 사용하면 페이지 전체가 새로 로딩 됩니다.

새로 로딩된다는 것은 화면 깜빡임이 필수적으로 발생하게 되고 이는 사용자 경험을 떨어뜨리게 됩니다.

즉, react-router는 SPA 사용자 경험 향상을 목적으로 합니다.

 

 

✔ SPA 사용자 경험 향상이란?

싱글 페이지 어플리케이션(SPA)은 웹 어플리케이션의 구조를 나타내는 용어로, 하나의 HTML 페이지로 구성되며 동적으로 페이지의 내용을 업데이트하는 방식의 어플리케이션입니다. 대표적인 SPA 프레임워크로는 React, Angular, Vue.js 등이 있습니다. 

 

 

✔ SPA의 특징과 동작 방식

1. 단일 HTML 페이지:
   • SPA는 초기 로딩 시에 하나의 HTML 페이지만 로드됩니다. 사용자가 어플리케이션을 처음으로 열면 이 단일 페이지가 로딩되고, 그 이후에는 페이지 간의 전환 시에 새로운 HTML을 서버에서 불러오지 않습니다.
2. 동적 로딩 및 업데이트:
   • SPA는 필요한 리소스(JavaScript, CSS, 이미지 등)를 초기에 로드한 후, 필요한 경우에만 데이터를 서버로부터 비동기적으로 받아와 동적으로 페이지의 일부를 업데이트합니다. 이는 사용자가 새로운 콘텐츠를 볼 때 페이지를 새로고치지 않아도 되도록 합니다.
3. 클라이언트 측 라우팅:
   • SPA에서는 라우팅을 클라이언트 측에서 처리합니다. 즉, 사용자가 새로운 경로로 이동할 때 서버에 요청을 보내지 않고, 브라우저에서 라우팅을 처리합니다. 이로써 페이지 간의 전환 속도가 빨라집니다.
4. 상태 관리:
   • SPA에서는 클라이언트 측에서 상태를 관리합니다. 사용자의 상호작용에 따라 어플리케이션의 상태가 변경되면, 이를 효과적으로 관리하여 화면에 반영합니다.
5. 높은 사용자 경험:
   • SPA는 초기 로딩 후에는 빠른 페이지 간 전환과 부드러운 사용자 경험을 제공합니다. 페이지가 새로고침되지 않고 동적으로 업데이트되므로 사용자가 어플리케이션을 끊김 없이 사용할 수 있습니다.

 

✔  SPA의 사용 목적 

싱글 페이지 어플리케이션(SPA)을 사용하는 주요 목적은 웹 어플리케이션의 사용자 경험을 향상시키는 것입니다.

1. 빠른 페이지 로딩:
   • SPA는 초기 로딩 이후에는 페이지 간의 전환 시에 서버에서 전체 페이지를 다시 로드하지 않습니다. 이로써 사용자는 빠른 페이지 로딩과 더 빠른 전체 어플리케이션 성능을 경험할 수 있습니다.
2. 부드러운 사용자 경로:
   • 페이지 간의 전환이 서버에서 필요하지 않으므로, 전환 사이에 화면이 깜빡이거나 다시 그려지는 현상이 없습니다. 이는 사용자에게 부드러운 사용자 경로를 제공합니다.
3. 동적 업데이트:
   • SPA에서는 필요한 데이터만 서버에서 가져와 동적으로 페이지를 업데이트할 수 있습니다. 이는 사용자가 페이지를 새로 고치지 않아도 실시간으로 업데이트된 정보를 볼 수 있게 합니다.
4. 높은 상호작용성:
   • SPA는 클라이언트 측에서 많은 작업을 처리하므로 사용자와의 상호작용이 더 빠르고 활발하게 이루어질 수 있습니다. 예를 들어, 사용자 입력에 따른 즉각적인 반응이 가능합니다.
5. 캐싱 및 로컬 스토리지 활용:
   • SPA는 필요한 리소스를 최초 로딩 시에 불러온 후, 필요한 경우에만 업데이트하므로 캐싱 및 로컬 스토리지를 효과적으로 활용할 수 있습니다. 이는 사용자에게 빠른 성능을 제공하며 대역폭을 절약할 수 있습니다.
6. 자연스러운 네비게이션:
   • SPA에서는 페이지 간의 전환을 서버가 아닌 클라이언트에서 처리하기 때문에 자연스러운 네비게이션이 가능합니다. 사용자는 새로운 페이지로 이동할 때 화면이 즉시 업데이트되어 끊김 없이 경험할 수 있습니다.

 

---

 

 

3️⃣ Router 종류

HashRouter

URL의 해쉬(#) 값을 이용하는 라우터

 

BrowserRouter

• history API를 사용
• 별도의 서버 설정이 없다면 새로고침 시 404에러 발생
• 큰 프로젝트에 적합

React-Router-Dom

React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리

 

 

---

 

 

4️⃣ 설치하기

리액트 터미널에 아래 npm을 작성해줍니다.

>> npm install react-router-dom

 

 

---

 

 

5️⃣ 세팅하기

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

 

 

✔ BrowserRouter

• history API를 활용해 history 객체를 생성합니다.
• history API는 내부적으로 stack 자료구조의 형태를 띄기 때문에 사용자가 방문한 url 기록들을 차곡차곡 쌓는 형태로 저장해둔다고 생각하면 됩니다.
• 라우팅을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성하고 감싸주어야 합니다.

 

✔ Routes

• 현재 브라우저의 location(window.href.location 정보를 가져온다) 상태에 따라 다른 element를 렌더링.
• Route.element: 조건이 맞을 때 렌더링할 element. <Element />의 형식으로 전달.
• Route.path: 현재 path값이 url과 일치하는지 확인해 해당 url에 매칭된 element를 렌더링해줍니다.

 

✔ Route

• 모든 Route의 상위 경로에 존재해야 하며, location 변경 시 하위에 있는 모든 Route를 조회해 현재 location과 맞는 Route를 찾아줍니다.

 

아래는 기본 설정 코드 입니다.

컴포넌트를 가져오기 때문에 element={<Main/>} 라고 쓰는 것 주의 해줍시다! ⭐

const Router = () => {
  return (
    <BrowserRouter>
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="/login" element={<Login />}>
            <Route path=":Id" element={<LoginId />} />
          </Route>
        </Routes>
    </BrowserRouter>
  );
};

 

위와 같이 Router 컴포넌트를 생성해주고

 

import Router from "./Router";

const App = () => (
  <>
      <Router />
  </>
);

export default App;

 

상위 렌더링 요소에 컴포넌트를 import 해줍니다.

 

 

 

참고 https://velog.io/@kandy1002/React-Router-Dom-%EA%B0%9C%EB%85%90%EC%9E%A1%EA%B8%B0

 

 

---

 

 

5️⃣ 프로젝트 적용

App.js

 

각 페이지마다 경로명을 정해주고 기본 라우터를 작성해 준 모습입니다.

 

Main.js

Main 컴포넌트를 만들고 내용을 작성해준 모습입니다.