<aside> 💡

Mission

• React Router Dom을 설치,세팅 후 Header 컴포넌트를 생성한다.
• Styled Components를 반영한다. </aside>

리액트 라우터 돔 세팅

리액트 라우터 돔(React Router DOM)은 리액트 애플리케이션에서 라우팅을 구현하기 위한 라이브러리입니다. 이 라이브러리를 사용하면 단일 페이지 애플리케이션(SPA)에서 여러 페이지를 구현할 수 있습니다.

주요 특징

• 선언적 라우팅: JSX를 사용하여 라우트를 정의할 수 있어 직관적이고 읽기 쉽습니다.
• 동적 라우팅: URL 파라미터를 사용하여 동적으로 컴포넌트를 렌더링할 수 있습니다.
• 중첩 라우팅: 복잡한 레이아웃과 페이지 구조를 쉽게 구현할 수 있습니다.
• 프로그래매틱 네비게이션: JavaScript를 사용하여 페이지 간 이동을 제어할 수 있습니다.

기본 사용법

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

이 예제에서는 '/', '/about', '/contact' 경로에 대한 라우트를 정의하고 있습니다. 사용자가 해당 URL로 이동하면 지정된 컴포넌트가 렌더링됩니다.

리액트 라우터 돔을 사용하면 복잡한 네비게이션 구조를 쉽게 구현할 수 있으며, 사용자 경험을 향상시킬 수 있습니다.

공식 문서의 React Router DOM 설정 코드

React Router DOM의 최신 버전(v6 이상)에서는 다음과 같이 설정할 수 있습니다:

import * as React from "react";
import * as ReactDOM from "react-dom/client";
**import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";**

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

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

이 코드는 React Router DOM의 공식 문서에서 제공하는 기본 설정 예시입니다. 여기서 createBrowserRouter 함수를 사용하여 라우터를 생성하고, RouterProvider 컴포넌트를 통해 애플리케이션에 라우터를 제공합니다.

이 설정을 통해 "/" 경로에 대한 간단한 라우트를 정의하고 있으며, 필요에 따라 더 많은 라우트를 추가할 수 있습니다.

⇒ 볼드 표시한 부분만 입력해도 반영된다.