React-Router는 React 애플리케이션에서 페이지 간의 전환을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다.
SPA(Single Page Application)에서 여러 페이지를 구현할 수 있게 해주며, 사용자 경험을 향상시키는 데 큰 역할을 합니다.
이번 포스팅에서는 React-Router의 설치부터 기본 구성, 라우트 설정까지 자세히 알아보겠습니다.
React-Router란?
React-Router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 가능하게 해주는 라이브러리입니다. 이를 통해 사용자는 페이지를 새로 고침하지 않고도 다른 페이지로 이동할 수 있습니다. React-Router는 URL을 기반으로 컴포넌트를 렌더링하며, 이를 통해 사용자는 더 매끄러운 탐색 경험을 할 수 있습니다.
React-Router 설치하기
React-Router를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. npm을 사용하여 설치할 수 있으며, 아래의 명령어를 터미널에 입력하면 됩니다.
npm install react-router-dom
설치가 완료되면, package.json 파일의 일부가 다음과 같이 변경된 것을 확인합니다.
프로젝트의 주요 파일에서 React-Router를 사용할 준비가 완료되었습니다.
React-Router 설정
- 프로젝트 내에 router 폴더를 생성하고 root.js 파일에서 기본 라우팅 설정을 추가합니다.
import { createBrowserRouter } from "react-router-dom";
const root = createBrowserRouter([
])
export default root;root.js는 createBrowserRouter()통해서 어떤 경로에는 어떤 컴포넌트를 보여 줄 것인지를 결정하는 역할을 합니다.
경로의 추가는 파라미터로 전달되는 배열의 내용물로 결정됩니다.
실행되는 리액트 애플리케이션을 root.js를 이용해서 경로에 맞는 컴포넌트를 보여주어야 합니다.
이를 처리하기 위해서 프로젝트 실행시 가장 먼저 실행되는 app.js파일을 수정해줍니다.
import { RouterProvider } from "react-router-dom";
import root from "./router/root";
function App() {
return (
<RouterProvider router={root}/>
);
}
export default App;실행해보면 아직은 아무런 설정이 존재하지 않기 때문에 빈 화면만 보게됩니다.
페이지용 컴포넌트 추가와 설정
pages 폴더생성하여 MainPage.js 파일을 추가합니다.
const MainPage = () => {
return (
<div className="text-3xl">
<div>Main Page</div>
</div>
);
}
export default MainPage;MainPage는 React-Router의 동작을 확인하기 위한 것으로 아직은 단수한 문자열만 출력되도록 합니다.
리액트 프로젝트가 실행될 때 첫 화면은 MainPage 컴포넌트가 보일 수 있도록 root.js 파일에 설정을 추가합니다.
import { Suspense, lazy } from "react";
const { createBrowserRouter } = require("react-router-dom");
const Loading = <div>Loading...</div>
const Main = lazy(() => import("../pages/MainPage"))
const root = createBrowserRouter([
{
path: "",
element: <Suspense fallback={Loading}><Main/></Suspense>
}
])
export default root;- 경로가 '/' 혹은 아무것도 없을 때는 MainPage 컴포넌트를 보여줍니다.
- <Suspense>와 lazy()는 필요한 순간까지 컴포넌트를 메모리상으로 올리지 않도록 지연로딩을 위해서 사용합니다.
- 아직 컴포넌트의 처리가 끝나지 않았다면 화면에 간단히 'Loading...'메시지를 보여주도록 합니다.
root.js 설정에서 lazy()를 이용하는 지연로딩이 어떻게 동작하는지를 확인해 보기 위해 또 다른 페이지용 컴포넌트로 AboutPage.js를 추가합니다.
const AboutPage =() => {
return (
<div className="text-3xl">About Page</div>
);
}
export default AboutPage;
AboutPage 컴포넌트는 브라우저의 경로가 '/about'인 경우에 동작하도록 root.js 파일에 설정을 추가합니다.
import { Suspense, lazy } from "react";
const { createBrowserRouter } = require("react-router-dom");
const Loading = <div>Loading...</div>
const Main = lazy(() => import("../pages/MainPage"))
const About = lazy(() => import("../pages/AboutPage"))
const root = createBrowserRouter([
{
path: "",
element: <Suspense fallback={Loading}><Main/></Suspense>
},
{
path: "about",
element: <Suspense fallback={Loading}><About/></Suspense>
}
])
export default root;
리액트는 spa라서 새로고침과 같이 새로 경로를 실행하는 것은 조심해야한다.
그래서 기존 html에서 사용한 <a>태그 대신 <Link>사용해야합니다.
예제로 MainPage.js 파일을 수정하여 '/about'경로로 이동할 수 있는 링크를 추ㅜ가합니다.
import { Link } from "react-router-dom";
const MainPage = () => {
return (
<div>
<div className="flex">
<Link to={'/about'}>About link</Link>
</div>
<div className="text-3xl">Main Page</div>
</div>
);
}
export default MainPage;
MainPage에 추가된 <Link>는 리액트 내부에서 해당 컴포넌트만을 처리합니다.
현재 예제에서 < Suspense>와 lazy()를 이용해서 해당 컴포넌트가 필요한 순간까지는 로딩하지 않도록 되어있다.
'/' 혹은 빈 경로로 접근할 경우 MainPage 컴포넌트만 로딩해서 보여줍니다.
<Link> 로 처리된 'About link'을 클릭하면 AboutPage 컴포넌트만 추가적으로 로딩된다.
반면에 브라우저 주소창에서 'about'경로를 호출할 때는 화면상의 결과는 동일하지만, 실행 과정에서 리액트가 아예 처음부터 다시 실행된다.
현재는 애플리케이션의 크기가 작아서 문제가 되지않겠지만 규모가 커지면 리액트가 시작되는 것 만으로도 많은 시간이 소모되니 주의하자!
댓글