React Router란?

 

React Router는 React.js에서 routing을 위해 사용하는 standard library다.

React Router를 활용하면 부드러운 브라우저의 URL 전환이 가능하다.

본 포스팅은 2022년 4월 기준 react-router-dom v6 최신 버전에 대한 글이다.

---

1. 개요

React.js 하면 가장 먼저 떠오르는 점은 SPA(Single Page Application)일 것이다.

즉, React를 사용한 앱은 주로 Client에서 Rendering되며, 하나의 페이지 내에서 추가 리로딩없이 데이터를 업데이트하는 방식으로 사용자에게 View를 제공한다.

비록 SEO(검색 엔진 최적화)에 불리하고, 첫 로딩 시간이 상대적으로 길다는 단점이 있지만, React로 구축한 서비스는 화면의 깜빡임 없이 우수한 UX(사용자 경험)를 제공한다.

 

2. 원리

이러한 SPA를 가능하게 하는 요소 중 하나가 바로 React Router다.

 

React Router는 HTML5의 History API를 사용한다.

History API는 window.history객체를 통해 페이지 주소에 대한 데이터를 보관한다. 때문에 새로 고침을 하지 않는 이상, Client에서 Rendering함으로써 View의 자연스러운 전환이 가능하다.

 

React Router는 바로 이 History API를 개발자가 편리하게 사용할 수 있도록 돕는다.

 

3. 사용

React 프로젝트내에서 터미널에 다음의 명령어로 설치한다.

npm i react-router-dom

React Router의 주요 Component로는 BrowserRouter, Routes, Route, Link 등이 있다. 이들은 아래 코드와 같이 import하여 사용할 수 있다.

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

---

더 자세히 알아보기

https://reactrouter.com/docs/en/v6/getting-started/overview

 

 

 

 

-학습을 진행하며 남기는 지식 포스팅-

 

-부족한 설명이 있다면 부디 조언 부탁드립니다-

 

 

 

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로,

이에 따른 일정액의 수수료를 제공받습니다