새로운 프로젝트 생성 & Bootstrap 사용하기
React 부트스트랩 사용
- https://react-bootstrap.github.io/getting-started/introduction
npm install react-bootstrap bootstrap- Css 파일 사용
- app.js에
import 'bootstrap/dist/css/bootstrap.min.css';
이미지 넣는 법 & public 폴더 이용하기
- css파일에서 src 폴더의 이미지 넣을땐
./이미지경로 - html(app.js)에서 src 폴더의 이미지 넣을 땐 import부터 하고 필요한 곳에 사용해야한다.
import 작명 from '이미지경로';- 변수 중간에 문자 넣는 방법
<div className='main-bg' style={{backgroundImage :'url('+ bg +')'}}></div>
Public 폴더 이용하기
리액트는 사이트 발행 전에 htmljs css파일을 압축한다.(bundling)
public 폴더에 있던 것 압축이 안된다.
- html에서 public 폴더 이미지 사용할 땐 그냥
/이미지경로 - public폴더 이미지 쓰는 권장방식
코드 길어지면 import export 하면 됩니다.
다른 파일에 있던 변수가져오려면,
1.변수를 export하고
2. import를 하면 된다.
export하려면 export default 변수명
import 하려면 import 작명 from './파일경로'
export 여러개 하려면 export{변수1, 변수2}를 기입한다.
import 여러개 하라면 import {변수1, 변수2} from './경로'를 기입한다.\
변수뿐만이 아니라 함수 & 컴포넌트도 export 가능하다.
let data = [
{
id: 0,
title: "말티즈",
content: "말티즈는 참지않긔",
price: 5
},
{
id : 1,
title : "포메",
content : "날아다니는 솜뭉치",
price : 110000
},
{
id : 2,
title : "비숑",
content : "솜사탕 한입 하실라우?",
price : 130000
}
]
export default data;
- state 사용하기 위해서는
import { useState } from 'react';선언 꼭하기! - 복잡한 자료에서 데이터 뽑을땐 시작기호만 잘보면 된다.
[로 시작하면 배열!{로 시작하면 obj 자료!
숙제 해설 (Card 컴포넌트 만들기)
숙제1. 컴포넌트 만들어보기
숙제2. 데이터바인딩 해보기
<div className="container">
<div className="row">
<Card dogs={dogs[0]}> </Card>
<Card dogs={dogs[1]}> </Card>
<Card dogs={dogs[2]}> </Card>
</div>
</div>
function Card(props){
return (
<div className="col-md-4">
<img src="https://ilyo.co.kr/contents/article/images/2020/0320/1584669108291841.jpg" width ="80%"/>
<h4>{props.dogs.title}</h4>
<p>{props.dogs.content}</p>
<p>{props.dogs.price}</p>
</div>
)
};숙제3. map 써보기
{
dogs.map((a,i)=> {
return (
<Card dogs={dogs[i]} i={i+1}> </Card>
)
})
}
리액트 라우터 1 : 셋팅이랑 기본 라우팅
페이지 나누는법
1. 컴포넌트만들어서 상세페이지 내용채움
2. 누가 /detail 접속하면 그 컴포넌트 보여준다
-
react-router-dom 라이브러리 쓰면 쉽게 만들 수 있다.
-
터미널에서
npm install react-router-dom -
src 폴더 index.js
-
app.js
페이지 이동버튼은 <Link>
<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>
<Routes>
<Route path="/" element={
<>
<div className='main-bg'></div>
<div className="container">
<div className="row">
{
dogs.map((a,i)=> {
return (
<Card dogs={dogs[i]} i={i+1}> </Card>
)
})
}
</div>
</div>
</>
} />
<Route path="/detail" element={<div>상세페이지임</div>} />
</Routes>
리액트 라우터 2 : navigate, nested routes, outlet
숙제 <Detail> 만들기
function Detail(){
return (
<div className="container">
<div className="row">
<div className="col-md-6">
<img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
</div>
<div className="col-md-6">
<h4 className="pt-5">상품명</h4>
<p>상품설명</p>
<p>120000원</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
)
}
export default Detail;
useNavigate
- 페이지 이동도와주는 함수 useNavigate();
-
let navigate = useNavigate();<Nav.Link onClick={()=> {navigate('/')}}>Home</Nav.Link> <Nav.Link onClick={()=> {navigate('/detail')}}>Detail</Nav.Link> -
navigate(-1)은 뒤로가기 버튼이다.
- 404 페이지
<Route path="*" element={<div>없는 페이지입니다.</div>} />- path에 *를 넣으면
- Nested Routes
-
태그 안에 태그가 들어갔다 를 뜻한다.
-
장점1. 작성 간단.
-
장점2. Nested routes 접속시엔 element 2개나 보인다.
-
어디보여줘야할지 잘 작성해줘야한다
<Outlet>를 통해서
<Route path="/about" element={< About />} />
<Route path="/about/member" element={< About />} />
<Route path="/about/location" element={< About />} />위와 아래 코드는 같다.
<Route path="/about" element={< About />} >
<Route path="member" element={< About />} />
<Route path="location" element={< About />} />
</Route>
function About(){
return (
<div>
<h4>회사정보임</h4>
<Outlet></Outlet>
</div>
)
}Q. nested routes 쓰는 순간?
- 여러 유사한 페이지가 필요할 때 사용한다.
리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기
천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵