react-router-dom 사용

React 에서 a 태그 대신 사용하는 NavLink 에 대해 .

React에서 제공 되는 react-router 라이브러리에서<BrowserRouter> 는 라우팅을 구현하는 컴포넌트.
가끔 무료강의나 유튜브에 올라온 외국 영상을 보게되면,
index.js 에서

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  //</React.StrictMode>
);

이런식으로 <App/>을 전체로 감싸주는 경우를 볼 수 있다.

또 다른 경우로는 ,

import React from 'react'
import { Home } from './Home'
import {  BrowserRouter, Route, Routes } from 'react-router-dom'
import { Test } from './test'
export const Pages = () => {
    return (
        <BrowserRouter>
        <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/test' element={<test />} />
        </Routes>
        </BrowserRouter>
    )
}

이렇게 특정 컴포넌트 또는 컴포넌트 그룹에 대해 라우팅을 독립적으로 구성해주는 경우가 있다.

사실 이 두가지에 대해 어떻다 라고 생각을 해본적이 없는데 어떤게 좀 더 일반적인지, 그리고 두가지의 방법의 목적성을 찾고 싶어서 글을 써본다. (추후 업데이트도 예정.부족한 내용이 있다면).

BrowserRouter 컴포넌트를 App 컴포넌트의 래퍼로 사용하는 방식은 일반적으로 사용되는 패턴. 이렇게 하면 애플리케이션의 모든 컴포넌트에서 라우팅 기능을 사용할 수 있게 된다. 모든 페이지 컴포넌트에 대한 라우팅 로직을 작성할 필요 없이, 각 페이지에 해당하는 컴포넌트를 만들고<Route>컴포넌트를 사용하여 <BrowserRouter>컴포넌트에서 렌더링할 수 있다..

하지만 컴포넌트를 감싸지 않고 다른 컴포넌트에서 <BrowserRouter>를 사용하는 것은 특정 컴포넌트 또는 컴포넌트 그룹에 대한 라우팅을 독립적으로 구성하고 싶을 때 사용될 수 있음. 이렇게 하면 라우팅 로직이 특정 컴포넌트에 한정되며, 애플리케이션의 다른 부분과 격리될 수 있습니다. 예를 들어, <App> 컴포넌트의 하위 컴포넌트 중에서만 특정 라우팅이 필요한 경우 해당 컴포넌트 내에서 <BrowserRouter>를 사용하여 독립적인 라우팅을 구성할 수 있음.

따라서 <BrowserRouter>를 <App> 컴포넌트의 래퍼로 사용하면 애플리케이션 전체에서 일관된 라우팅을 구성할 수 있고, 다른 컴포넌트에서 <BrowserRouter>를 사용하면 해당 컴포넌트 내에서 독립적인 라우팅을 구성할 수 있음. 선택은 개발자에게 달려있으며, 프로젝트의 구조와 요구 사항에 맞게 사용할 수 있다.