감자튀김 공장🍟

저번의 문제는 Quantity 값을 변경하면 console 값에는 반영이 되어서 출력이 되는데 화면이 리렌더링 되지 않는 점이였다. 몇 번의 시행착오를 겪으면서 생긴 문제점들을 나열해보자면 화면에 바뀐 값이 리렌더링이 안돼서 useState로 값을 관리할려고 추가했더니 렌더링 무한루프에 빠졌다. 최종 금액 값이 리렌더링이되면 장바구니 배열의 수량도 같이 렌더링이 되어야하는데 둘 중에 하나만 리렌더링 된다. id: 3의 quantity를 3에서 5로 변경하고 id: 10의 quantity를 변경하면 id 마다 quantity가 변경되는 것이 아니라 한 값에서 변경이 이루어졌다. 즉, id: 10의 quantity가 뭐였던 id: 3의 마지막 값인 5에서 변경이 이루어졌다. 수량 조절 버튼(+/-)을 두 번..

Cart.js에서 넘겨준 장바구니 제품 리스트와 sum 값을 받아서 최종 수량 변경과 가격 설정을 해야한다. Cart.js에서는 제품 페이지에서 추가하는 제품들이 그대로 저장된다. 같은 물품을 두 번 담으면 Cart.js 화면에는 두 번 제품 이름이 출력된다. 이를 FinalCart.js 에서는 Object로 데이터들을 다루는데 같은 id 값이 있는 물품을 한 개로 줄이면서 Quantity 값을 +1 증가하고, 같은 제품의 수량 변경을 가능하게 한다. FinalCart.js import React from 'react'; import {useHistory, useLocation} from 'react-router-dom'; import {useSelector} from 'react-redux'; impo..