React Router 개요
라우팅이란?
라우팅(routing)이란 사용자가 요청한 리소스를 얻기 위해 웹 서버 내에서 URL에 명시된 리소스를 찾아가는 과정을 가리킵니다. 일반적으로 사용자가 요청한 URL을 해석하고 새로운 페이지로 전환하기 위한 데이터를 얻기 위해 웹 서버에 필요한 데이터를 요청하여 전달받고 화면을 전환하는 작업을 통틀어 의미합니다.
라우팅은 웹 서버 측에서 진행되지만 브라우저 객체 모델(BOM)를 이용하면 실제로는 웹 브라우저에서 동작하는 라우팅 작업을 사용자에게는 서버 측에서 동작하는 것 같이 보여줄 수 있습니다. 이렇게 웹 브라우저, 즉 클라이언트 측에서 발생하는 라우팅을 클라이언트 사이드 라우팅(Client-Side-Routing, CSR)이라고 합니다. 이러한 라우팅 시스템을 활용하면 SPA 방식의 웹 앱을 손쉽게 만들 수 있습니다.
SPA 방식의 웹 앱은 사용자가 웹 브라우저를 통해 가장 처음 서버에 접속할 때 단 한 개의 페이지만 내려받습니다. 이후 해당 페이지에 포함된 자바스크립트 코드를 통해 사용자에게 마치 여러 페이지가 존재하는 것처럼 알맞은 페이지를 보여주는 것입니다.
이때 라우팅 시스템은 프로젝트에 포함된 수많은 컴포넌트 중에서 특정 컴포넌트를 찾아 화면에 보여주는 역할을 하게 되며, 사용자가 새로운 페이지를 요청하면 BOM의 Location 객체와 History 객체를 사용하여 웹 브라우저 주소창의 URL 값만 업데이트한 후 라우팅 설정에 따라 다른 컴포넌트를 불러와 새로운 UI를 렌더링합니다.
CSR은 실제 웹 서버에 페이지를 요청하는 것은 아니기 때문에 컴포넌트가 바뀌어도 화면의 리렌더링이 발생하지 않기 때문에 애니메이션과 같은 더욱 역동적인 화면을 더욱 빠르게 제공할 수 있게 됩니다.
React Router
React Router는 React의 라우팅 기능을 제공하는 라이브러리 중에서 가장 많이 사용되고 있는 라이브러리 중 하나로, 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다.
React Router는 Context API를 기반으로 구현되어 있기에 라우팅 기능을 사용하려면 최상위 컴포넌트로 BrowserRouter 컴포넌트를 사용해야만 합니다. 또한, 하나의 애플리케이션에는 단 하나의 Router만을 사용해야 합니다.
이러한 라우팅 관련 라이브러리나 프레임워크는 React에서 공식적으로 지원하는 것이 아니며, React Router 대신 Next.js, react-location 등을 사용할 수도 있습니다.
React Router 시작하기
React에서 React Router를 사용하기 위해서는 우선 react-router-dom 라이브러리를 설치해야 합니다.
Shell
# npm인 경우
npm install react-router-dom
# yarn인 경우
yarn add react-router-dom
그리고 react-router-dom 라이브러리로부터 최상위 컴포넌트로 사용하게 될 BrowserRouter 컴포넌트를 불러와 다른 컴포넌트들을 감싸주면 React Router가 적용됩니다.
BrowserRouter 컴포넌트는 페이지를 리로딩 하지 않고도 History 객체를 사용하여 주소의 경로 관련 정보를 컴포넌트가 사용할 수 있도록 해 줍니다.
index.js
import React, { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import "./styles.css"; import App from "./App"; const root = createRoot(document.getElementById("root")); root.render( <StrictMode> <BrowserRouter> <App /> </BrowserRouter> </StrictMode> );
