๐ญ spa
์์ ํ๋ฉด์ ์ ํ์ํค๋ router
, ๊ทธ๋ฆฌ๊ณ ์คํ์ผ๋ง์ ํธํ๊ฒ ํ ์ ์๋ css์ ์ฒ๋ฆฌ๊ธฐ์ธ sass
์ ๋ํด ์ค๋ช
์์ด์ด์ด์ด์ด์ด์!
SPA
songle page application ํ์ด์ง๊ฐ ํ ๊ฐ์ธ ์ดํ๋ฆฌ์ผ์ด์
Routing
๋ค๋ฅธ ๊ฒฝ๋ก(url์ฃผ์)์ ๋ฐ๋ฅธ ๋ค๋ฅธ view(ํ๋ฉด)์ ๋ณด์ฌ์ฃผ๋๊ฒ (ํ๋ฉด์ ํ)
๋ผ์ฐํฐ๋ ๋ฆฌ์กํธ์ ๋ผ์ฐํ ๊ธฐ๋ฅ์ ์ํด ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ด๋ค.
ํฐ๋ฏธ๋์
npm install react-router-dom --save
๊ฐ์ ์ ๋ ฅํ์ฌ ์ค์น
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./pages/Login/Login";
import Main from "./pages/Main/Main";
function Router() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Login />} />
<Route path="/main" element={<Main />} />
</Routes>
</BrowserRouter>
);
}
export default Router;
Router.js
ํ์ผ์ ๋ฃ์ด์ค ์ฝ๋์ด๋ค.
๋จผ์ ๋ก๊ทธ์ธ์ฐฝ์์ ๋ฉ์ธํ์ด์ง๋ก ๋์ด๊ฐ๊ฒ ๋ง๋ค์ด์ฃผ๋ Routes๋ฅผ ๊ตฌํํด์ฃผ์๋ค.
ReactDOM.render(<Router />, document.getElementById('root'));
Router ์ปดํฌ๋ํธ๋ก ์ค์ ํด์คฌ๋ค.
์ด๋ํ๋ ๋ฐฉ๋ฒ ๋๊ฐ์ง๊ฐ ์๋ค.
Link
:to
prop์ ๊ฐ๋๋ค.useNavigate
:path
prop์ ๊ฐ๋๋ค.
3-1. Link
import React from "react";
import { Link } from "react-router-dom";
function Login() {
return (
<div>
<Link to="/signup">ํ์๊ฐ์
</Link>
</div>
);
}
export default Login;
์ด๋ฐ์์ผ๋ก ํ์๊ฐ์
์ ํด๋ฆญํ๋ฉด ์ฌ์ดํธ๋ฅผ ๋ถ๋ฌ์ค๋ ๊ฐ๋
์ด๋ค.
Link/
์ปดํฌ๋ํธ๋ a
ํ๊ทธ์ ๊ฐ์ด ์ง์ ํ ๊ฒฝ๋ก๋ก ๋ฐ๋ก ์ด๋์์ผ์ฃผ๋ ๊ธฐ๋ฅ์ ํ๋ค.
ํ์ง๋ง ๋๊ฐ์ ํ๊ทธ์ ์ฐจ์ด์ ์ a
ํ๊ทธ๋ ์ธ๋ถ ์ฌ์ดํธ๋ก ์ด๋ํ๋ ๊ฒฝ์ฐ ์ด๊ณ , Link
๋ ํ๋ก์ ํธ ๋ด์์ ํ์ด์ง ์ ํํ๋ ๊ฒฝ์ฐ์ด๋ค.
3-2. useNavigate
import React from "react";
import { useNavigate } from "react-router-dom";
const Login = () => {
const navigate = useNavigate();
const goToMain = () => {
navigate("/main");
};
return (
<div className="login">
<h1 className="login_logo">Westagram</h1>
<div className="login_input">
<input
type="text"
className="inputId"
placeholder="์ ํ๋ฒํธ, ์ฌ์ฉ์ ์ด๋ฆ ๋๋ ์ด๋ฉ์ผ"
/>
<input type="password" className="inputPw" placeholder="๋น๋ฐ๋ฒํธ" />
<button className="login_btn" onClick={goToMain}>
๋ก๊ทธ์ธ
</button>
</div>
<div className="forget_pw">
<a className="forgetPwLink" href="#">
๋น๋ฐ๋ฒํธ๋ฅผ ์์ผ์
จ๋์?
</a>
</div>
</div>
);
};
export default Login;
useNavigate
๋ ํจ์ ํธ์ถ์ ํตํด ํ์ด์ง๋ฅผ ์ด๋์ํค๋ ๋ฐฉ๋ฒ์ด๋ค.
goToMain
์์ ๊ตฌํํ๊ฒ์ฒ๋ผ useNavigate
ํ
์ ํตํด ํ์ด์ง ์ด๋ํ๋ ๋ฐฉ๋ฒ๋ ์๋ค.
์ด๋ ๊ฒ ๊ตฌํํ๋ฉด ๋ฒํผ์ ํด๋ฆญํ๋ฉด ํด๋น ํ์ด์ง๋ก ์ด๋์ ํ ์ ์๊ฒ ํจ์๋ฅผ ๋ฐํํด์ฃผ๊ณ ํด๋น ํจ์๋ navigate
๋ผ๋ ๋ณ์์ ์ ์ฅํ๋ค ๊ทธ๋ค์ navigate
์ ์ธ์๋ก Router.js
์์ ์ค์ ํ path
๋ฅผ ๋๊ฒจ์ฃผ๋ฉด ํด๋น ๊ฒฝ๋ก๋ก ์ด๋ํ ์ ์๋ค.