[React] 리액트 라우터 설치 및 사용 | A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes> | useRoutes() may be used only in the context of a <Router> component 오..

 

웹 애플리케이션에서, 웹 서버와 웹 브라우저가 여러 HTML 파일을 주고받는 방식을 MPA(multi page application)
라우팅이 웹 브라우저에서만 일어나는 웹 방식을 SPA (single page application)

 

간단히 말해 MPA는 여러개의 페이지, SPA는 단일 페이지로 구성된 애플리케이션이라 볼 수 있습니다.

 

그리고 리액트의 라우터가 바로 SPA 방식을 사용합니다.

🧵SPA의 동작 방식

1. 사용자가 서버에 접속하게되면, 다양한 컴포넌트들로 구성된 하나의 HTML 파일을 웹브라우저에 전송합니다.

2. HTML 파일은 애플리케이션의 기본적인 레이아웃과 초기 데이터를 정의합니다.

3. 이 HTML파일에 포함된  JavaScript 코드가 동작하여 사용자와의 상호작용을 처리하고, 필요한 데이터를 비동기적으로 요청합니다.

4. 요청된 데이터를 받아와서 사용자가 원하는 내용을 DOM 구조로 만들어가며 사용자에게 보여줍니다.

5. 사용자가 다른 페이지로 이동하거나 상호작용을 요청할 때에도 동일한 방식으로 데이터를 요청하고 DOM을 업데이트합니다.

 

---

 

 

 

👣리액트 라우터 설치

> npm i react-router-dom

 

 

터미널에서 해당 명령어를 입력한 후 리액트 라우터 패키지 설치가 완료되면 리액트 라우터를 사용할 수 있습니다.

 

현재 React Router v6에서는 리액트 훅 기술에 기반을 두고 있으며, 리액트 라우터는 context 기반으로 설계가 되었으므로 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(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

index.js파일에서 import { BrowserRouter } from 'react-router-dom'; 해준 후, <BrowserRouter>로 감싸줍니다.

 

// App.js
import './App.css';
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About'

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

export default App;

App.js파일에서 import { Route, Routes } from 'react-router-dom'; 해준 후, <Routes>로 <Route>를 감싸줍니다.

 

 

이전 버전에서는 <Route> 태그를 직접적으로 사용해 라우팅 설정이 가능했지만, 현재 버전(v6)에서는 <Routes> 컴포넌트 안에서만 <Route>를 사용해 라우팅을 설정합니다.

 

📌<정리>

useRoutes() may be used only in the context of a <Router> component. 오류 발생 👉  <BrowserRouter>로 감싸줘라!(index.js) ( <BrowserRouter>는 내부적으로 <Router>를 사용하고 있습니다.  )

 

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly.  오류 발생 👉 <Route>태그를 <Routes>태그로 감싸줘라 ! (App.js) ( 참고로 React Router v6에서는 <Routes>를 사용하여 경로에 따른 컴포넌트를 렌더링하며, <Routers>는 이전 버전의 문법입니다. v6에서는 <Routes>를 사용하여 라우팅을 구성하는 것이 권장됩니다.)