아직 작성중인 블로그입니다!

React Router을 사용해서 페이지 이동하기

전통적인 Routing(페이지 이동)에서 Client Side Routing으로!

전통적인 웹사이트에서 페이지 전환이 이루어지는 방법

전통적인 클라이언트-서버 아키텍쳐에서 웹 페이지 이동이 이루어지는 과정은 아래와 같았습니다.

• 클라이언트사이드(브라우저)에서 특정 페이지에 대한 리소스를 서버에 요청
• 서버는 특정 리소스(HTML, CSS, JS )파일 등등을 브라우저에 전달
• 브라우저는 서버에서 보내준 JS스크립트와 CSS를 평가하여 HTML 렌더(화면에 출력)합니다.

이 방법은 페이지가 바뀔 때마다 서버와의 통신이 발생하게 됩니다.

하지만 대부분의 페이지들은 레이아웃이 크게 바뀌지 않는데요, 페이지가 바뀔 때마다 매번 새로운 파일들을 서버로부터 요청하고 받아오는 것은 비효울적이다라는 생각이 절로 듭니다.

Client Side Routing

지금은 Vue, React의 보편화로 인해 매우 자연스러워진 SPA방식의 프론트엔드 웹개발은 기본적으로 Client Side Routing에 해당합니다.

페이지 이동을 할 때는 마치 서버에 자원을 요청한 것처럼 URL만 바꿔주고 사실은 이미 들고 있던 자원들로 새로이 UI를 렌더해 바꿔주기만하는 것이 Client Side Routing의 골자입니다.

새로운 UI를 렌더링할 때 추가로 데이터가 필요하다구요? 서버에서는 HTML, CSS, JS파일을 요청할 필요가 없이, 데이터만 fetch해오면 됩니다.

물론 CSR방식도 단점은 있습니다. 모든 자원을 클라이언트 사이드에 들고 있다가 비어있는 HTML들을 한 번에 채우는 방식이다보니 모든 HTML문서가 생성되는데 상대적으로 시간이 오래걸립니다. 페이지가 무거울수록 말이죠. 그래서 나중에는 Server Side Rendering을 지원하는 프레임워크(Next.js)가 등장했지만, 이 이야기는 조금 나중에 더 하도록 하죠 ㅎㅎ.

react-router-dom 공식문서

공식문서부터 제대로 다시 읽어봅시다. 공식문서만큼 정확한 건 없으니까요^^.

https://reactrouter.com/en/main/start/overview

react router에서는 일반 페이지 이동도 지원하지만, root layout을 활용한 Nested Route도 지원을 합니다.

그러면 페이지들의 레이아웃이 독립적인 일반 라우팅부터 설정해보면서 Nested Route의 필요성을 느껴보도록 하죠.

기본 라우팅 설정

//App.tsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from '@Page/Home';
import About from '@Page/About';
import Info from '@Page/Info';

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: 'about', element: <About /> },
  { path: 'info', element: <Info /> },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

먼저 react-router-dom에서 createBrowserRouter, Routerprovider를 import 합니다.

createbrowserRouter 함수에 인자로 RouteObject 배열을 넘겨주면서 Router 객체를 리턴받습니다.

Typescript의 장점은, 타입추론이 되고, 마우스 커서를 올려보면 해당 함수가 어떤 타입의 인자를 받는지 코드 안을 들여다보지 않아도 알 수 있어서 편리한 것 같아요.

RouterObject에는 해당 페이지의 url경로를 명시하는 path, 이 경로에서 렌더링할 페이지 컴포넌트를 명시하는 element속성을 필수로 입력해줍니다. 그 외에 에러가 나타났을 때 렌더링할 컴포넌트를 명시하는 errorElement, nested route에 사용되는 children속성들이 있는데, 이것들은 선택사항이니 라우팅 전략에 따라 취사선택하시면 좋겠습니다.

이전에 우리가 Path alias를 잘 성정해줬기 때문에, @~로 페이지 컴포넌트들이 페이지임을 확실히 알 수 있네요. 루트 경로에는 <Home/>컴포넌트를, about 과 info 에는 각각<About/>``<Info/> 컴포넌트가 렌더링되도록 연결해 두었습니다.

<RouterProvider/>의 router 프롭으로 리턴받은 router객체를 넘겨주면, 이제 지정해놓은 경로에서는 모두 올바르게 페이지컴포넌트들을 렌더링할 것입니다.

다음 글에서는 모든 페이지에서 화면 상단에 노출시킬 <NavBar/>컴포넌트와 이를 모든 페이지에 쉽게 적용시키기 위한 Nested Route를 설정해 보도록 하겠습니다.