리액트의 관습들 모음

리액트의 관습들 모음

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 이게 정배임아니면? BrowserRouter 그대로 사용? 

결론부터 말씀드리면, import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 형태는 매우 흔하게 사용되는 '정배'가 맞습니다. 

하지만 BrowserRouter를 직접 사용하는 것도 틀린 것은 아니며, 상황에 따라 다를 수 있습니다. 

상세 설명

1. as Router를 사용하는 이유 (정배인 이유)
   • 관습과 가독성: BrowserRouter가 너무 길기 때문에 Router라는 짧은 별칭을 주로 사용합니다.
   • 유연성: 나중에 BrowserRouter를 HashRouter 등으로 변경해야 할 때, 하위 코드의 <BrowserRouter>를 다 고칠 필요 없이 import 문에서 as Router 부분만 수정하면 되므로 편리합니다.
2. BrowserRouter 그대로 사용하는 경우
   • as를 사용하지 않아도 기능상 동일합니다. 다만 코드가 길어질 뿐입니다. 

v6/v7 권장 설정 (구조 예시)

현재 가장 많이 사용되는 react-router-dom v6 이상에서는 아래와 같이 App.js 또는 index.js에서 구조를 잡습니다.

jsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

요약

import { BrowserRouter as Router, ... } 방식을 그대로 사용하시면 됩니다. 업계에서 널리 통용되는 방식입니다. 

(참고: 최신 버전(v7)에서는 createBrowserRouter와 같은 Data API 방식이 더 권장되는 추세이나, <Routes>를 사용하는 선언적 방식도 여전히 표준으로 작동합니다.)