감자튀김 공장🍟

폴더 구조 src | |- component ||- Cart.js ||- FinalCart.js | |- pages ||-MenuList.js pages/MenuList.js import React, {useState, useEffect} from 'react'; import axios from 'axios'; import {useDispatch} from 'react-redux'; import {addCart} from '../store/actions'; function MenuList(props) { const [products, setProducts] = useState([]); const dispatch = useDispatch(); const list2 = []; useEffect(() => {..

폴더 구조 src | |- store | |- actions || ||- index.js | |- reducers | |- cartReducer.js |- index.js store/actions/index.js export const addCart = (item) => { return { type: 'ADD_ITEM', payload: item, }; }; export const deleteCart = (item) => { return { type: 'DELETE_ITEM', payload: item, }; }; export const increment = (item) => { return { type: 'INCREMENT', payload: item, }; }; export const decremen..

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