1. React Router 사용해보기

Routing 이란

프런트엔드 기술의 라우팅은 웹 페이지를 다시 로드할 필요 없이 웹 애플리케이션의 여러 보기 또는 구성 요소 사이를 탐색할 수 있는 메커니즘이다.

이는 한 번의 페이지 로딩으로 필요한 모든 코드(HTML, JavaScript, CSS)가 검색되고 현재 URL에 따라 적절한 콘텐츠가 사용자에게 표시되는 단일 페이지 애플리케이션(SPA)을 구축하는 데 중요하다.

React, Angular, Vue와 같은 최신 JavaScript 프레임워크 및 라이브러리에는 라우팅을 처리하는 자체 라이브러리 또는 모듈이 존재한다.

• React: react-router-dom

• Angular: @angular/router

• Vue: vue-router

react-router-dom 설치 (v6.22.3)

npm install react-router-dom

간단하게 셋업하기

// main or App.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import './index.css';

const router = createBrowserRouter([
  {
    path: '/',
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

ING