https://minji0123.github.io/shoppingmall/
react-bootstrap
react-router-dom
axios
react-redux
local storage
- router 라이브러리로 페이지 이동 구현
- 등록하지 않은 페이지 방문 시 (404) 발생하는 오류 대비
<Route path="/detail/:id" element={<DetailPage shoes={shoes}/>}/>
<Route path="/cart" element={<Cart/>}/>
<Route path="*" element={<div>없는 페이지에요</div>}/>- useNavigate 훅으로 페이지 이동 구현
let navigate = useNavigate();
<Nav.Link onClick={() => {navigate('/')}}>Home</Nav.Link>
<Nav.Link onClick={() => {navigate('/Cart')}}>Cart</Nav.Link>
<Nav.Link href="#notice" >About</Nav.Link>-
더미데이터가 아닌, 서버에서 전송받은 데이터로 화면 설계
-
axios 라이브러리를 사용하여 데이터를 받아온 뒤, useState 에 값을 저장시켜 데이터 바인딩
useEffect(()=>{
axios.get(`https://minji0123.github.io/shoppingmall/data/items.json`)
.then((결과)=>{
let copy = [...shoes, ...결과.data];
setShoes(copy);
})
.catch(() => {
console.log('실패함ㅅㄱ');
})
},[]);- redux 라이브러리를 이용해 장바구니 기능 구현
- 화면 상세 페이지에서 상품을 장바구니에 추가 시, redux store 에 선언한 함수를 호출해서 장바구니 페이지에서 추가한 상품을 확인할 수 있게 함
<button className="btn btn-danger" onClick={()=>{
let param = {
id:찾은상품.id,
name:찾은상품.title,
price:찾은상품.price,
count:1,
}
dispatch(changeItem(param));
cartTimer();
}}
>주문하기</button>- local storage 를 이용해 최근 본 상품 기능 구현
- 새로고침 시 데이터가 초기화되는 현상 방지
if(!localStorage.getItem('watched'))
localStorage.setItem('watched',JSON.stringify([]));