2023-04-28

fragment를 쓰는 이유 = 의미 없는 div 추가를 피하기 위해

페이지 나누는 법
1. react-router-dom라는 외부 라이브러리를 설치한다.
터미널 열어 npm install react-router-dom@6 입력

import { BrowserRouter } from "react-router-dom";

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

2. 다시 App.js로 돌아와 상단에 사용할 컴포넌트 import 하기
3. 그 후 아래처럼

import { Routes, Route, Link } from 'react-router-dom'

function App(){
  return (
    (생략)
    <Routes>
      <Route path="/detail" element={ <div>상세페이지임</div> } />
      <Route path="/about" element={ <div>어바웃페이지임</div> } />
    </Routes>
  )
}