React SPA๊ฐ ๋์ ๋ ๋ฐฐ๊ฒฝ๊ณผ ์ด๋ป๊ฒ ์งํ๋๋์ง ํ์ตํ๋ค.
Youtube, facebook, Gmail ๋ฑ โค SPA๋ก ๋ง๋ค์๋ค.
์ฅ์ ์ด ์๋ค๋ฉด ๋จ์ ๋ ์กด์ฌํ๋ค.
React Router ๋ผ์ด๋ธ๋ฌ๋ฆฌ
๋ฅผ ์ค์นํด์ผํ๋ค.1.React App ์ค์น
npx create-react-app ํ์ผ๋ช
npm install react-router-dom@6.3.0
import { BrowserRouter, Routes, Route, Link} from 'react-router-dom';
npm run start
<Browser Router>
: ๋ผ์ฐํฐ ์ญํ (์ ์ฒด๋ฅผ ๊ฐ์ธ๊ณ ์์ด์ผํ๋ค.)<Routes>
: ์ฌ๋ฌ Route
๋ฅผ ๊ฐ์ธ๊ณ ๊ฒฝ๋ก๊ฐ ์ผ์นํ๋ฉด ๋ ๋๋ง ํ๋ค. (๊ฒฝ๋ก๋ฅผ ๋งค์นญ)<Route>
: path์์ฑ
์ ์ง์ ํด path์์ ์ด๋ค ์ปดํฌ๋ํธ๋ฅผ ๋ณด์ฌ์ค์ง ์ ํ๋ค.<Link>
: ํ์ด์ง ์ ํ์ ๋ฐฉ์งํ๊ธฐ์ํด to์์ฑ
์ ํ์ฉํด Route
์ ์ค์ ํ path
์ฃผ์์ ์ฐ๊ฒฐํ๋ค.function App(){
return(
<BrowserRouter>
<div>
<nav>
<ul>
<li>
{/* Link ์ปดํฌ๋ํธ ์ด์ฉํด ๊ฒฝ๋ก ์ฐ๊ฒฐ */}
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
{/* ๊ฒฝ๋ก๋ path๋ก, ์ปดํฌ๋ํธ๋ element๋ก ์ฐ๊ฒฐ */}
<Route path="/about" element={<About />} />
</Routes>
</div>
</BrowserRouter>
)
}
function Home() {
return <h1>Home</h1>;
}
function About() {
return <h1>About</h1>;
}
export default App;
{/*useNavigate ๋ถ๋ฌ์ค๊ธฐ*/}
import { useNavigate } from 'react-router-dom';
function App(){
{/*๋ณ์ ํ ๋น*/}
const navigate = useNavigate();
const backBtn = () => {
navigate(-1)
}
return (
<Link onClick={backBtn}>Back</Link>
<button onClick={backBtn}>Back</button>
)
}
export default App;
useNavigate(-1) ๋ค๋ก๊ฐ๊ธฐ
useNavigate(1) ์์ผ๋ก๊ฐ๊ธฐ
Router ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ด์ฉํด SPA๋ฅผ ๊ตฌํํ ์ ์๋ ์๊ฐ์ด์๋ค.
์์ง์ ๋ฏธ์ํ์ง๋ง React๊ฐ ์ด๋ค์์ผ๋ก ์๋๋๋์ง์ ๊ตฌ์กฐ๋ฅผ ๋ค์ ํ ๋ฒ ํ์
ํ ์ ์๋ ์๊ฐ์ด์๋ค.