[React] 장바구니 수량 변경 문제

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';
import axios from 'axios';

function FinalCart() {
    const history = useHistory();
    const cart = useSelector((store) => store.cartReducer);
    const sum = useLocation();
    let finalSum = sum.state.sum; // Cart.js에서 받아온 sum 값
    const list = [];
    const res = [];
    const arr = Object.create(null);
    
    for(let i = 0; i < cart.length; i++) { // Cart.js의 제품들을 Object으로 변경
        const json = Object.create(null);
        json.Id = cart[i].id;
        json.Name = cart[i].name_kor;
        json.Price = cart[i].price;

        list.push(json);
    }

    for(let i = 0; i < list.length; i++) { // 같은 id 값이 있는 제품의 Quantity를 +1
        if(!arr[list[i].Id]) {
            res.push(list[i]);
        }
        arr[list[i].Id] = ((arr[list[i].Id] || 0) + 1);
    }

    for (let j = 0; j < res.length; j++) {
        res[j].Quantity = arr[res[j].Id];
    }

	// 다른 코드들..

    return (
        <div>
            <h3>최종 장바구니 화면입니다.</h3>
            <div>총 금 액 : {finalSum}</div>
            <br />
            <hr />
            <div>
                {
                    res.map((res, idx) => { // res 출력
                        return (
                            <div key={idx}>
                                <div>{res.Name}</div>
                                <div>{res.Price}</div>
                                <div>{res.Quantity}</div>
                                <button onClick={() => { // 수량 증가
                                    res.Quantity += 1;
                                    finalSum += res.Price;
                                    console.log(res);
                                    console.log(finalSum);
                                }}>+</button>
                                <button onClick={() => { //수량 감소
                                    if(res.Quantity > 0) {
                                        res.Quantity -= 1;
                                        finalSum -= res.Price;
                                    } else {
                                        res.Quantity = 0;
                                    }
                                    console.log(res);
                                    console.log(finalSum);
                                }}>-</button>
                            </div>
                        );
                    })
                }
            </div>
            <div><button>결제하기</button></div>
        </div>
    );
}

export default FinalCart;

 

 

 

 

 

현재 수량 변경과 그에 따른 가격 변경까지 console.log로 찍어보면 다 제대로 출력이 되지만, 그것들이 화면에 반영되지 않는다. Redux나 context API나 Hooks로 값 관리를 안해서 안되는 것일까..?

 

 

 

 

 

 

+) Redux로 quantity까지 한 번에 변경한 것도 추가

https://good-potato.tistory.com/entry/React-%EC%9E%A5%EB%B0%94%EA%B5%AC%EB%8B%88-%EC%88%98%EB%9F%89-%EB%B3%80%EA%B2%BD1-%EC%B5%9C%EC%A2%85

(전 블로그에서 2021.02.20 00:55에 작성된 글입니다.)