๋ชฉ์ฐจ
์ด์ ๊ธ โผ
0. 2023.05.05 - [๐ | WEB DEV/React] - [React] 0. React๋ฅผ ์ฌ์ฉํ๋ ์ด์ & ์ด๊ธฐ ์ธํ
1. 2023.05.07 - [๐ | WEB DEV/React] - [React] 1. JSX
2. 2023.05.26 - [๐ | WEB DEV/React] - [React] 2. state (๋ณ์, array, object)
2-1. 2023.05.27 - [๐ | WEB DEV/React] - [React] 2-1. array state ์ ๋ ฌํ๊ธฐ ( .sort()ํ์ฉ)
3. 2023.05.28 - [๐ | WEB DEV/React] - [React] 3. ์ปดํฌ๋ํธ (Component)
4. 2023.05.28 - [๐ | WEB DEV/React] - [React] 4. ๋์ ์ธ UI ์ ์ํ๊ธฐ
5. 2023.05.28 - [๐ | WEB DEV/React] - [React] 5. ๋ฐ๋ณต๋๋ ๋ถ๋ถ ์ถ์ฝํ๊ธฐ (map)
6. 2023.05.29 - [๐ | WEB DEV/React] - [React] 6. props
8. 2023.07.06 - [๐ | WEB DEV/React] - [React] 8. ๋ค๋ฅธ ํ์ผ์์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ
์น์ฌ์ดํธ๋ฅผ ์ ์ํ ๋ ํ์ด์ง๋ฅผ ๋๋๊ณ ์ถ์ ๊ฒฝ์ฐ
html ํ์ผ์ ์๋ก ํ๋ ์์ฑํ๋ค๋ฉด ๊ทธ๊ฒ์ด ๋ฐ๋ก ์๋ก์ด ํ์ด์ง๊ฐ ๋๋ ๊ฒ์ด๋ค.
ํ์ง๋ง React๋ ๋จ ํ๋์ html ํ์ผ์ธ index.html ๋ง์ ์ฌ์ฉํ๋ค.
๋ฐ๋ผ์ react-router-dom ์ด๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ด์ฉํ์ฌ div ์์ ๋ด์ฉ์ ๋ฐ๊พธ์ด์ฃผ๋ฉฐ ํ์ด์ง ์ ํ์ ๊ตฌํํ๋ค!
๋ฆฌ์กํธ | ๋ฆฌ์กํธX |
์ปดํฌ๋ํธ ์ ์ ํด๋น path์ ์ ์ ์์ฒญ ์ ๊ทธ์ ๋ง๋ ์ปดํฌ๋ํธ๋ฅผ ๋ณด์ฌ์ค |
์ฌ๋ฌ html ํ์ผ ์์ฑ ํด๋น path์ ์ ์ ์์ฒญ ์ ๊ทธ์ ๋ง๋ html ํ์ผ ์ก์ |
1. react-router-dom ์ธํ ํ๊ธฐ
๋จผ์ react-router-dom์ ์ค์นํ๋ค.
npm install react-router-dom@6
์ดํ index.js์์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ importํ ๋ค
<App/> ํ๊ทธ๋ฅผ <BrowserRouter>ํ๊ทธ๋ก ๊ฐ์ธ์ค๋ค.
//index.js
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
2. ๋ผ์ฐํ
url๋ง๋ค ๋ค๋ฅธ ํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๊ฒฝ์ฐ ์๋์ ๊ฐ์ด ๊ตฌํํ๋ค.
// App.js
import { Routes, Route, Link } from 'react-router-dom'
function App(){
return(
...
<Routes>
<Route path="/๊ฒฝ๋ก1" element={ <div> ... </div> } />
<Route path="/๊ฒฝ๋ก2" element={ <div> ... </div> } />
</Routes>
)
}
- Routes : ํ์ด์ง ์ปจํ ์ด๋
- Route : ๊ฐ ํ์ด์ง๋ค
์์์ ์ค์ ํ ๊ฒฝ๋ก์ ์ ์ํ ๊ฒฝ์ฐ html์ ํด๋น ์์น์ ์์๊ฐ ๋ณด์ด๊ฒ ๋๋ค.
Routes ์ธ์ ํ๊ทธ๋ค์ ํ์ด์ง์ ์๊ด์์ด ํญ์ ํ๋ฉด์ ๋ณด์ธ๋ค!
์์
//App.js
<Navbar variant="dark" className='nav-container'>
<Container className='navbar'>
<Navbar.Brand href="#home">RED WAVE</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#cart">Cart</Nav.Link>
</Nav>
</Container>
</Navbar>
<Routes>
<Route path='/' element={
<>
<div className="main-bg"></div>
<div className="item-container">
{
data.map(function(a,i) {
return(<Item data={data} i={i} />)
})
}
</div>
</>
}></Route>
<Route path='/detail'></Route>
</Routes>
1) ๋ฉ์ธ ํ์ด์ง
2) /detail
์์ฒ๋ผ Routes ์์ ๋ค์ด์์ง ์์ navbar๋ ํ์ด์ง์ ์๊ด์์ด ์กด์ฌํ์ง๋ง
๋ด๋ถ์ ์กด์ฌํ๋ ์์๋ค์ path์ ๋ฐ๋ผ ์ ํ์ด ๋๋ ๊ฒ์ ์ ์ ์๋ค.
3. ํ์ด์ง ์ ํ
ํ์ด์ง ์ ํ์ <Link/> ํ๊ทธ๋ก ๊ตฌํํ๋ค.
to=๊ฒฝ๋ก ๋ฅผ ํตํด ์ค์ ํ path๋ก ์ ์ํ๋๋ก ํ๋ค.
<Link to="/๊ฒฝ๋ก1"> ... </Link>
<Link to="/๊ฒฝ๋ก2"> ... </Link>
์์
//App.js
<Link to="/">ํ</Link>
<Link to="/detail">์์ธํ์ด์ง</Link>
Linkํ๊ทธ๋ ์ค์ ๋ก aํ๊ทธ๋ก ์ ์ฉ์ด ๋๋ค.
'๐ | WEB DEV > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] 11. ๋ผ์ฐํ -3 ์์ฐํ ๋ผ์ฐํ (2) | 2023.10.03 |
---|---|
[React] 10. ๋ผ์ฐํ -2 (useNavigate, 404page, Nested Routes, Outlet) (0) | 2023.07.10 |
[React] 8. ๋ค๋ฅธ ํ์ผ์์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ (0) | 2023.07.06 |
[React] 7. ์ด๋ฏธ์ง ์ฝ์ ํ๊ธฐ(css, html, publicํด๋์์ ๊ฐ์ ธ์ค๊ธฐ) (0) | 2023.07.03 |
[React] CORS ์๋ฌ ํด๊ฒฐํ๊ธฐ (http-proxy-middleware) (0) | 2023.06.30 |
๋๊ธ