3. Router

React Router 버전 6.4부터 라우팅 객체를 만들어 라우팅 정보만 별도로 분리 가능

사용법

route 정보를 객체로 만듦

const routes = [
  {
    element: <Layout />,
    children: [
      { path: '/', element: <HomePage /> },
      { path: '/about', element: <AboutPage /> },
   ],
  },
];

만든 객체를 createBrowserRouter에 넘겨 객체를 만들고 <RouterProvider/>에 전달

• createBrowserRouter는 DOM History API를 이용해 URL을 업데이트하고 히스토리 스택을 관리

• 6.4버전부터는 loader, action, fetcher의 data API 사용 가능해짐

• <RouterProvider> 컴포넌트는 데이터 라우터 객체를 전달받아 렌더링

const router = createBrowserRouter(routes);

root.render((
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
));

path에 따라 다르게 렌더링될 컴포넌트의 위치는 <Outlet/> 으로 지정

function Layout() {
  return (
    <div>
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
}

테스트

테스트시에는 createMemoryRouter를 통해 라우터를 만들어서 테스트

describe('routes'', () => {
  function renderRouter(path: string) {
    const router = createMemoryRouter(routes, { initialEntries: [path] });
    render(<RouterProvider router={router} />);
  }

  context('when the current path is "/"', () => {
    it('renders the home page', () => {
      renderRouter('/');

      screen.getByText(/Hello/);
    });
  });

  context('when the current path is "/about"', () => {
    it('renders the about page', () => {
      renderRouter('/about');

      screen.getByText(/About/);
    });
  });
});

느낀 점

라우팅과 관련된 코드를 분리하는걸 보면서 뭘하든 관심사의 분리가 중요하다는 생각이 들었다. 리액트 라우터가 강의도 짧고 사용하는게 크게 어려워보이지 않음에도 저걸 나혼자 적용해서 프로젝트를 할 수 있을까 하는 생각이 든다. 더 많은 훈련이 필요할 것 같다. 특히 테스트 코드를 작성하는걸 많이 공부해야할 것 같다.