Cmarket
Cmarket bareminimum 구현입니다.
reac-router-dom을 이용해서 Clinet Side Routing를 학습합니다. useState를 이용하여 상태를 사용한다.
쇼핑몰 애플리케이션의 주요기능을 구현합니다.
- [장바구니 담기]버튼을 이용해서 장바구니에 상품을 추가되도록 구현
- [삭제]버튼으로 장바구니 상품이 제거되도록 구현
- 장바구니의 상품 갯수의 변동이 생길 때마다, 상단에 네비게이션 바에 상품 갯수가 업데이트되도록 구현.
Cmarket + ReactHook - 스프린트 리뷰
스프린트를 클론 후에 npm install 패키지제이슨에 들어 있는 세팅을 설치. 리엑트 부분은 구현이 되어있어서 npm만 설치하면 초기 세팅은 끝이다. npm start로 실행을 시키고 , 이번 스프린트는 테스트 케이스가 존재하지 않아 자유롭게 학습을 하면 된다.
App.js
App.js안에 대부분 라우팅이 되어있어서 전체적인 구조를 파악하려면 App.js파일을 살펴보면 된다.
App.js를 보면 라우터 컴포넌트로 전체를 감싼뒤, Nav 상단 파트 안에 Switch 컴포넌트로 페이지를 구성하고 있고, 구성된 페이지를 Route 컴포넌트로 나눠준다.
메인화면 상품리스트 화면과 장바구니 화면으로 나눠져 있다.
우리가 구현을 해야할 것은 상품리스트의 상품들이 [장바구니 담기] 버튼을 눌렀을때 장바구니에 담기고, 장바구니에서 삭제를 눌렀을 때 삭제가 되는 것을 구현해야한다.
Nav.js
Nav.js에서는 단순히 프롭스를 받아와서 화면에 랜더링이 될 때 숫자만 변환 시키면 된다. App.js의 라우터 랜더링 쪽에서 보냈던 프롭스인 cartItems를 받아 장바구니 옆 span태그 안에서 cartItmes.length 로 수정하면 된다.
pages/ItemListContainer.js
상품목록페이지인 ltemListContainer.js 입니다.
App.js 라우터 렌더링 부분에 프롭스로 items, cartItems, setCartItems를 보냈으니 인자로 받는다.
다른 분들은 아마 App.js에서 state를 받아서 함수를 만들어서 실행을 시켰지만 저는 이벤트 함수 handleClick()를 화면같이 코드르 짜서 실행을 시켰습니다.
App.js에서 함수를 구현을 해서 실행을 시켰으면 여기서 아마 items.map에서 들어있는 handleClick를 제거해주면 될거다.
하지만 저는 ItemListContainer.js 핸들클릭함수를 사용을 해주었습니다.
pages/ShoppingCart.js
장바구니 페이지입니다. ShoppingCart.js에서 App.js 프롭스로 내려준 items, cartItems, setCartItems 받았습니다.
여기선 handleDelete 함수를 수정을 해주었습니다.
const handleQuantityChange = (quantity, itemId) => {
} 함수는 App.js에서 구현을 해서 수정을 하지 않았습니다.
또다른 방법으로 구현을 할려면 ,
const handleQuantityChange = (quantity, itemId) => {
onQQuantityChang(items, quantity)
}
이렇게 만들어 주고 App.js에서 useState hook으로 구현을 해서 스위치 라우터부분에 세팅을 해서 해주면 된다.
이번 스프린트는 테스트 케이스가 없어서 여러가지 방법으로 구현을 할수가 있었다. 다른 페어분들의 코드를 보니 정말 다양하게 구현을 할수가 있었다.
다음 파트에서는 Redux에 대해서 학습을 한 내용을 쓸 예정입니다.
