[React] react-router-dom

✅ SPA와 react-router-dom

• 페이지가 하나로 이루어진 SPA(Single Page Application)
• 기술적으로는 한 페이지만 존재하지만, 사용자가 경험하기에는 여러 페이지가 존재하는 것처럼 느껴짐
• 다른 정보 요청 시 새로운 HTML을 요청하는 것이 아니라 브라우저의 History API를 사용해 브라우저의 주소창의 값만 변경하고 라우팅 설정에 따라 다른 페이지 보여줌
• 리액트에서 라우트 시스템을 구축하기 위한 대표적 두 가지 선택지
  - React-Router ⬅️ 가장 많이 사용!!
  - Next.js

✅ router 사용하기

• 터미널에서 설치

  터미널> npm install react-router-dom
  터미널> yarn add react-router-dom

🔸 index.jsx(tsx)파일에서

• index.jsx(tsx)파일에서
• BrowserRouter를 import 해주고
• root.render() 내부에서 < App/>을 < BrowserRouter>로 감싸준다

import {BrowserRouter} from 'react-router-dom';
...
root.render(
    <BrowserRouter>
    	<App/>
    </BrowserRouter>
)

🔸 app.jsx(tsx)파일에서

• Routes, Route, Link import 해주기
• App() return문 내에서 < Routes>태그 안에 여러 < Route/> 넣어주기
• Route에 필수적인 두 가지 속성
  => path = '/' (경로)
  => element = {< div>< /div>} (html문)
• Route의 element 속성에 어떤게 들어가냐에 따라서 경로마다 바뀌는 내용이 일부 태그가 될 수도, 하나의 페이지가 될 수도 있음

import {Routes, Route, Link} from 'react-router-dom';
...
function App(){
	return(
		<Routes>
			<Route path='/' element={<span>main</span>}/>
			<Route path='/detail' element={<Detail/>}/>
		</Routes>
	)
}

<br><br><br>
🌟 잘못된 부분에 대한 말씀은 언제나 저에게 큰 도움이 됩니다. 🌟
👍 감사합니다!! 👍