리액트 라우터, 그리고 Route와 Link란?

minzyee·2023년 6월 28일
ReactTILlinkreact routerreact router dom
0

Today I Learn

목록 보기
6/8

🤔 왜 공부하는지?

리액트 라우터에 대해 모호하게 알고있어서 이번 기회에 개념을 알아보려고한다.


📝 리액트 라우터(React Router)란?

리액트 라우터는 리액트 기반의 웹 애플리케이션에서 클라이언트 측 라우팅을 관리하기 위한 네비게이션 라이브러리로, 이를 통해 웹 애플리케이션에서 페이지 간의 전환, URL 경로에 따른 컴포넌트 렌더링 등을 쉽게 처리할 수 있다.

  • 앱에서 발생하는 라우팅이 location이나 history와 같은 브라우저 내장 API와 완벽하게 연동할 수 있게 해준다.
  • 주로 SPA(Single Page Application)에서 사용된다.
  • 페이지 전환 시, 전체 페이지를 다시 로드하는 대신 동적으로 컴포넌트를 교체하며,
    웹 애플리케이션에서 빠르고 부드러운 페이지 전환을 가능하게 한다.

라우터의 역할

1. 경로 매칭(Route Matching)

  • 라우터는 현재 URL 경로와 사전에 정의된 경로 규칙을 비교하여 일치하는 경로를 찾는다.
  • 경로 매칭은 정적인 경로 뿐만 아니라 동적인 매개변수를 가진 경로에 대해서도 가능하다.

2. 컴포넌트 렌더링(Component Rendering)

  • 경로 매칭 결과에 따라 해당 경로에 대응하는 컴포넌트를 렌더링한다.
  • 이를 통해 해당 페이지에 필요한 컴포넌트와 기능을 사용자에게 제공할 수 있다.

리액트 라우터 설치

# npm
npm install react-router-dom

# yarn
yarn add react-router-dom

📝 라우팅 컴포넌트 종류 및 역할

Router 컴포넌트

  • react-router-dom 패키지에서 제공되는 컴포넌트이다.
  • 리액트 애플리케이션에 브라우저의 History API를 활용한 라우팅을 적용한다.
  • 내부에 라우트 설정을 포함한 컴포넌트들을 감싸야하기 때문에 애플리케이션의 최상위 컴포넌트로 사용된다.
  • 브라우저의 URL을 감지하고, 경로에 따라 해당하는 Route 컴포넌트를 렌더링한다.

Routes 컴포넌트

  • Routes는 여러 개의 경로와 그에 해당하는 컴포넌트를 설정한다.
  • Route 컴포넌트들을 포함하는 컨테이너 역할을 한다.

Route 컴포넌트

  • Route는 경로와 그에 해당하는 컴포넌트를 설정하는 라우팅 컴포넌트이다.
  • path prop을 사용하여 경로를 설정하고,
    element prop을 사용하여 해당 경로에 대응하는 컴포넌트를 지정하여 렌더링한다.
  • exact prop을 사용하여 정확한 경로 매칭을 지정할 수 있다.
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from "./components/Navigation";
import Footer from "./components/Footer";
import Home from "pages/Home";
import About from "pages/About";
import SearchResult from "pages/SearchResult";
import Profile from "pages/Profile";

function App() {
  return (
    <>
      <Router>
        <Navigation />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/search" element={<SearchResult />} />
          <Route path="/profiles/:username" element={<Profile />} />
        </Routes>
        <Footer />
      </Router>
    </>
  );
}

export default App;

  • react-router-dom 패키지에서 제공되는 컴포넌트이다.
  • 리액트 애플리케이션에서 내부 페이지 간의 링크를 생성하는 데 사용된다.
  • 페이지 새로고침 없이, 클릭된 링크에 따라 해당 페이지로 이동한다.
  • Link 컴포넌트는 <a> 태그로 렌더링되며, to='' 속성을 사용하여 링크 대상 경로를 지정한다.
    (이 경로는 Route 컴포넌트에서 설정한 경로와 일치해야 해당 페이지로 이동할 수 있다.)
import React from "react";
import { Link } from "react-router-dom";

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/profiles">Profile</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

❓ 리액트에서 <a>태그 대신 <Link> 컴포넌트를 사용해야 하는 이유

  • <a> 태그는 새로운 페이지 전환이 일어날 때마다 전체 페이지를 다시 렌더링하게 되어 초기 상태부터 다시 로드되며, 그로인해 기존의 state(유저가 작성한 데이터, 또는 스크롤 위치 등)이 초기화 되는 문제가 발생한다.
  • 반면에 Link 컴포넌트는 페이지 전환을 부드럽게 처리하기 위해 내부적으로 History API를 사용하기 때문에, 페이지 간 전환 시에 새로고침 없이 필요한 컴포넌트만 렌더링 되어 효율적으로 작동한다.

📚 참고

profile
minzyee
간지나는 인생을 살자.

0개의 댓글