npm install react-bootstrap bootstrap
import logo from "./logo.svg";
import "./App.css";
import { Button, Navbar, Nav, Container, } from "react-bootstrap";
function App() {
return (
<div className="App">
<Button variant="primary">Primary</Button>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
</Container>
</Navbar>
</div>
);
}
export default App;
import bg from "./img/bg.png";
...
<div className="main-bg" style={{backgroundImage: 'url(' + bg + ')'}}></div>
/logo192.png
라고 쓰기만 하면 된다.<img src={process.env.PUBLIC_URL + '/logo192.png'} width="80%"></img>
* for문으로 생긴 HTML에는 각 HTML마다 key가 부여되어야 하는데, 자식 컴포넌트에서 props.key를 쓰는 것은 유효하지 않다.
App.js
import name from './data.js';
...
return (
<div className="App">
{name}
...
data.js
let a = 10;
export default a; // 다른 파일에서 가져다 쓸 수 있는 변수가 된다.
App.js
...
import {a, b} from './data.js'
function App() {
let [shoes, setShoes] = useState();
return (
<div className="App">
{b}
...
data.js
let a = 10;
let b = 20;
export {a, b}; // 다른 파일에서 가져다 쓸 수 있는 변수가 된다.
...
<div className="container">
<div className="row">
{shoes.map(function (element, index) {
return (
<Content data={shoes[index]} key={index} index={index}></Content>
);
})}
</div>
</div>
</div>
);
}
function Content(props) {
return (
<div className="col-md-4">
{/* <img src={process.env.PUBLIC_URL + '/logo192.png'} width="80%"></img> */}
{/* <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"></img> */}
<img src={'https://codingapple1.github.io/shop/shoes' + (props.index + 1) + '.jpg'} width="80%"></img>
<h4>{props.data.title}</h4>
<p>{props.data.price}</p>
</div>
);
...
react-router-dom
npm install react-router-dom@6
입력index.js
에 다음과 같이 입력...
import { BrowserRouter } from "react-router-dom";
...
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
...
import { Routes, Route, Link } from 'react-router-dom';
...
<Route path="/" element={<div>메인페이지</div>}/>
<Route path="detail" element={<div>상세페이지</div>}/>
...
<Routes>
<Route
path="/"
element={
<>
<div className="main-bg"></div>
<div className="container">
<div className="row">
{shoes.map(function (element, index) {
return (
<Card
data={shoes[index]}
key={index}
index={index}
></Card>
);
})}
</div>
</div>
</>
}
/>
<Route path="/detail" element={<div>상세페이지</div>} />
</Routes>
...
<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>
폴더 구조
이 때 주의할 점으로는 해당 파일을 사용하는 파일들의 import 경로를 잘 설정해주어야 한다.
import Detail from "./routes/Detail.js";
useNavigate
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
<Nav.Link onClick={() => { navigate('/')}}>Home</Nav.Link>
<Nav.Link onClick={() => { navigate('/detail')}}>Detail</Nav.Link>
{/* /, /detail처럼 우리가 Route 해준 페이지를 제외한 모든 페이지들이 * */}
<Route path="*" element={<div>없는 페이지입니다.</div>}></Route>
<Route path="/about" element={<About></About>}/>
<Route path="/about/member" element={<About></About>}/>
<Route path="/about/location" element={<About></About>}/>
<Route path="/about" element={<About></About>}>
<Route path="member" element={<About></About>}/>
<Route path="location" element={<About></About>}/>
</Route>
코드를 간단하게 만들면서도, 보여주는 element를 중복시킬 수 있다.
즉 Route가 겹치면, 내용도 겹쳐지게 된다.
Nested Routes를 언제 쓰면 좋을까?
Nested Routes의 장점
여러 개의 페이지를 만들고 싶으면 URL 파라미터 사용
<Route path="/detail/:id" element={<Detail shoes={shoes}></Detail>}></Route>
useParams 훅
<Route path="/detail/:id" element={<Detail shoes={shoes}></Detail>}></Route>
Detail.js
import {useParams} from "react-router-dom";
function Detail(props) {
let {id} = useParams();
console.log(id);
...
<Route path="/detail/:id/abcd/:id2" element={<Detail shoes={shoes}></Detail>}></Route>