라우팅이란?

웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다. 프로젝트에 따라 하나의 페이지로 구성될 수도 있지만, 규모가 커지면서 여러 페이지를 구성하게 된다.

예전에는 이런 여러 페이지를 멀티 페이지 애플리케이션이라 불렀는데,
사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고 그 페이지 마다 서버에서 리소스를 받아 화면에 보여주면 방식이었다.

하지만 사용자의 인터랙션이 많아지고 다양한 정보를 웹에서 제공할 수 있도록 요구 되면서 html은 한번만 받아오고 이후에는 필요한 부분(데이터)만 화면에 업데이트 해주는 SPA(싱글 페이지 애플리케이션)으로 변화하게 되었다.

React는 SPA를 개발하기에 최적화된 JavaScript 라이브러리로 React Router를 통해 SPA에서도 여러 페이지를 이동하는 것과 같은 경험을 제공해 준다.

React Router를 사용하는 이유?

• 클라이언트 사이드 라우팅: React Router는 브라우저에서 페이지 전환이 발생할 때 페이지를 새로고침하지 않고도 애플리케이션의 다른 부분을 업데이트할 있다. 이로써 사용자 경험을 향상시키고 빠른 애플리케이션 내비게이션을 제공한다.

• 중첩된 라우팅: React Router는 중첩된 라우팅을 지원하여 애플리케이션을 구성할수 있다. 이는 복잡한 애플리케이션에서 각각의 라우터가 특정 영역에 대한 라우팅을 처리할 수 있도록 해준다.

• URL 매개변수와 쿼리 문자열 처리: React Router는 동적 URL 매개변수와 쿼리 문자열을 처리할 수 있다. 이를 통해 매개변수와 쿼리를 사용하여 페이지 간 데이터를 전달하고 필요에 따라 애플리케이션 상태를 업데이트할 수 있다.

• 히스토리 관리: React Router는 HTML5 히스토리 API를 사용하여 애플리케이션의 브라우저 히스토리를 관리한다. 이를 통해 뒤로 가기와 같은 브라우저 기능을 애플리케이션에 적용할 수 있다.

React Router 사용해보기

이번 프로젝트에서는 React Router 6.12 버전을 사용했다.

• App에서 createBrowserRouter를 사용하여 이동할 페이지의 path(경로)와 element(컴포넌트)를 갖는 router를 작성한다.

• 위에서 작성한 router를 렌더링하도록 App컴포넌트 return에 RouterProvider를 사용하여 router를 속성값으로 부여한다.

// App.jsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
	{ path: '/', element: <HomePage />},
	{ path: '/products', element: <ProductsPage /> }
])

const App = () => {
	return <RouterProvider router={router} />
}

• 레이아웃 엘리먼트를 통해 중첩된 라우트를 구성한다.

// App.jsx
// router에 <Layout> 엘리먼트를 구성한다.
// Layout의 children을 통해 사용자의 요청에 따라 해당 자식 엘리먼트가 레이아웃이 된다.
const router = createBrowserRouter([
	{ path: '/', 
		element: <Layout />,
		children: [
			{ path: '/', element: <HomePage />},
			{ path: '/products', element: <ProductsPage /> }
		], 
	},
])

• Layout의 children을 outlet으로 한번에 가져올 수 있다.

Layout은 Outlet의 선택된 엘리먼트와 TabBar를 가진 화면을 렌더링 해준다.

// Layout.jsx
import { Outlet } from 'react-router-dom';
import TabBar from '../TabBar';

const Layout = () => {
  return (
    <>
      <Outlet /> // router의 해당 엘리먼트가 렌더링된다.
      <TabBar /> // router의 엘리먼트와 함께 렌더링 되는 컴포넌트
    </>
  )
};

export default Layout;

• Link를 이용하여 페이지 이동

const HomePage = () => {
	return (
		<Link to="/products">the list of prodcuts</Link>
	)
}

// TabBar.jsx
const TABS: Tab[] = [
  { id: 0, name: 'home', label: '홈화면', path: '/' },
  { id: 1, name: 'newspaper', label: '판매내역', path: '/sales' },
  { id: 2, name: 'heart', label: '관심목록', path: '/heart' },
  { id: 3, name: 'message', label: '채팅', path: '/chat' },
  { id: 4, name: 'person', label: '내 계정', path: '/account' },
];

const TabBar = () => {
  return (
    <S.TabBarContainer>
      <S.TabBarMenu>
        <S.TabsList>
          {TABS.map((tab: Tab) => (
            <li key={tab.id}>
              <S.NavigationLink to={tab.path}>
                <Icon name={tab.name} />
                <div>{tab.label}</div>
              </S.NavigationLink>
            </li>
          ))}
        </S.TabsList>
      </S.TabBarMenu>
    </S.TabBarContainer>
  );
};

export default TabBar;

참고자료

react-router
React Router v6 튜토리얼