쇼핑 목록 추가 로직 정리 (redux slice를 중심으로) ✍️
☝️ 정리 구조
a) slice에 정의된 액션 생성 함수를 소개한다.(액션 함수)
b) 어떤 파일에서 무엇을 dispatch 하는지 살펴본다.(사용처)
c) addCase에서 데이터를 어떻게 parsing 되는지 살펴본다.(parsing)
1. getCartData Fn 🟢
자고로 함수는 무엇을 return 하는지가 가장 중요하다. 위 getCartData 액션 함수는 action을 받아와서 action을 return한다. 그렇다면 dispatch를 통해 무엇을 전달하는지가 가장 중요하다. dispatch가 전달하는 것이 바로 action이기 때문이다.
getCartData 함수는, 상세 페이지에서도 handleDirectClick 함수에서 사용된다. 로그인 된 유저가 맞다면, dispatch를 통해 {...DetailData, category, count}를 getCartData 함수로 전달한다.
MapData는 배열이다. shoppingData에서 category를 마치 변수처럼 활용해서 value를 가져오는데, 그 value가 배열이다.
DetailData는 카테고리에 의해 선택된 배열(MapData)에서의 elem.id와, id가 일치하는 제품을 의미한다. elem.id는 MapData 상의 id를 의미하고, 뒤에 있는 id는 사용자가 선택한 제품의 id를 의미한다. 한마디로 "너가 고른게 이거 맞아?"라는 질문이고 그 질문을 통과한 데이터가 DetailData이다.
'바로 구매' 버튼을 클릭하면 스프레드 문법을 통해 DetailData(=내가 고른 상품)를 복사한 뒤 category와 count key를 추가해서 각각의 value로 상태값을 넣어준다.
Counter는 상세 페이지 내부에 위치한다. 따라서 count 상태는 상세 페이지가 갖는다. Counter에 count 상태와 증감 로직을 props로 전달했고, Counter에서 증가 또는 감소시킨 숫자는 오롯이 상세 페이지의 count 상태로 반영된다. Counter에서 숫자를 3으로 올리면 그 상태를 상세 페이지에서 갖게 되고 그 값이 dispatch 할 때 반영되는 것이다.
따라서 action은 내가 고른 상품에 category와 count가 추가된 객체다.
action.payload는 내가 고른 상품이고 else문은 내가 고른 상품을 배열에 담는 로직이다.
그런데 동일한 상품(=category와 id가 일치하는 상품)을 추가로 구매한다면, 배열의 새로운 요소로 추가될 것이 아니라 기존 배열의 요소에서 count만 증가해야 한다.
existingProductIndex는 조건을 만족하는 첫 번째 배열의 요소의 인덱스를 의미한다. 이미 추가된 상품 배열(cartProduct)에서 category와 id가 모두 일치하는 요소가 있다면(existingProductIndex !== -1) 해당 요소의 count value에 증가된 count를 계속해서 더한다.
2. deleteCardData Fn 🟢
deleteCardData 액션함수는 id를 받아와서 id를 return한다.
쇼핑카트 페이지에서 handleDeleteData라는 함수에서 deleteCardData에 id를 담아서 dispatch하는 모습을 확인할 수 있다.
item은 장바구니에 추가된 상품 배열의 요소 중 하나를 의미한다. 지금 보니 item 자체를 보내고 있다. id만 보내려다가 category가 필요해져서, 코드가 정리되지 않은 것으로 보인다.
정정: 삭제 버튼을 클릭하면 클릭된 요소(객체) 자체가 handleDeleteData로 전달된다.
따라서 deleteCardData 액션함수가 받는 것은 쇼핑 카트에 추가된 요소 중 삭제하려는 요소이고, 해당 요소를 return한다.
삭제할 item의 id와 category를 구조분해할당을 통해 action.payload로부터 가져온다. getCartData Fn의 경우와 동일한 논리를 취한다. 돼지도 id가 1,2,3,4,...이고 닭도 id가 1,2,3,4,...이다. deleteIndex 로직이 없다면 돼지1을 삭제할 때 닭1도 삭제된다. 따라서 category와 id가 모두 일치하는지 확인하는 작업이 필요해진 것이다. splice 메서드를 통해 해당하는 요소'만' 삭제하게 된다.
3. updateTotalPriceAndQuantity Fn 🟢
updateTotalPriceAndQuantity 액션 함수는 데이터의 총가격과 총수량을 parsing하는 로직을 담고 있다. 초기값은 {totalPrice: 0, totalQuantity: 0}으로 설정되어 있다.
추가된 항목(cartProduct)에 대해 reduce 메서드를 적용한다.
totalPrice는 splitPrice라는 미리 만들어 놓은 모듈에 의해 나온 순수한 숫자(=가격)에 count를 곱한 값을 계속해서 더한 결과이다.
totalQuantity는 동일한 논리로 count를 더한 결과이다.
updateTotalPriceAndQuantity는 결국 totalPrice와 totalQuantity를 return 한다.
카트 페이지에서 데이터가 변결될 때마다 총가격과 총수량을 업데이트하기 위해 useEffect에서 dispatch를 통해 updateTotalPriceAndQuantity 액션 함수를 실행시킨다.
페이지에서 데이터가 변경될 때마다 액션 함수를 실행시키고, 그에 따라 액션 함수에서는 total에 대한 계산을 수행한다. 최종적으로 addCase에서는 계산된 값으로 state를 최신화한다.
회고(라 쓰고 부족한 점) ✍️
1. 로그아웃 후에 url로 cart에 접근하지 못하도록 해야 함
2. 회원별로 해당 정보가 저장되어야 함, 현재는 다른 아이디로 접속해도 데이터가 동일하게 남아있음
3. 장바구니 view를 완성해야 함
4. 모달 스타일링 아직도 안 했음, 스타일링 해야 함
5. 상품이 없을 때, 추가 문구
