4. Context 에서 "카트"의 "삭제" 로직을 추가해보자 with Array.splice()

사용

useReducer

 

javascript

Array.findIndex()

Array.splice()

Array.filter()

 

"제거" 방법에, splice() 를 사용했지만,

"제거"를 위해,전체 배열을 바꿔서 업데이트해도 된다.

Array.filter() 를 사용하여, 해당 id 와 "같지 않은" Element 들만 남겨서 삭제하는 방법도 있다.

 

Add 로직은 추가했다.

reducer function 의 "REMOVE_ITEM" 타입에, 제거 함수를 추가해보자.

 

제거로직

        with "Array.splice()"

        0. context에서 action 의 페이로드 로, id 를 받아, 해당 INDEX 를 찾는다.
        1. 카트에서 - 를 누르면, 해당 id에 대한 amount 에 -1 을 시킨다.
        2. 카트에서 - 를 눌러, amount 가 "0 이하" 인 상태가 된다면, 해당 Element 를 "제거"한다

 

 

1. 기본적인 "-" 를 했을때, context의 state 를 변경하는 로직을 만든다.

 <Cart-Context> - "reducerFunction"

        if (action.type === "REMOVE_ITEM") {
            const selectedIndex = state.itemInfo.findIndex(
                (item) => item.id === action.id);                   // id에 맞는 index 를 찾는다.

            const selectedItem = state.itemInfo[selectedIndex];     // 해당 index의 값을 저장

            let decreseItemAmount = selectedItem.amount - 1;        // - 를 누르면 하나씩 줄인다.
            let updatedItem = selectedItem;                         // 기존 상태를 받고
            updatedItem.amount = decreseItemAmount;                 // amount 를 오버라이드

            let updatedItems = [...state.itemInfo];                 // 기존 전체 배열을 받고
            updatedItems[selectedIndex] = updatedItem;              // 해당 updatedItem 을 오버라이드

            const updatedPrice = state.totalPrice - selectedItem.price; // totalPrice 는 price에 해당하는 값을 빼준다.

            return {
                itemInfo: updatedItems,
                totalPrice: updatedPrice,
            };
        }

<Cart-Context> - "reducerFunction-Dispatch"

        function removeItem(id) {
            dispatchCartAction({ type: "REMOVE_ITEM", id: id }); // 페이로드로, 변경할 데이터에 접근한다.
        }

<Cart> - "-" 눌럿을때, function

        function cartItemDecrease(id) {
            cartCtx.removeItem(id);
        }

 

2. 기본적인 로직이 짜여졌으면, 사용해보자.

 

3. 잘된다면, 이제, amount 가 0 이하일때의 조건을 추가한다.

 if (action.type === "REMOVE_ITEM") {
        const selectedIndex = state.itemInfo.findIndex(     // id에 맞는 index 를 찾는다.
            (item) => item.id === action.id); 

        const selectedItem = state.itemInfo[selectedIndex];             // 해당 index의 값을 저장

        let decreseItemAmount = selectedItem.amount - 1;                // - 를 누르면 하나씩 줄인다.

        let updatedItem = selectedItem;                                 // 기존 상태를 받고
        updatedItem.amount = decreseItemAmount;                         // amount 를 오버라이드

        let updatedItems;

        if (updatedItem.amount <= 0) {                  // 만약 업데이트된 amount가 0보다 작아진다면

            updatedItems = [...state.itemInfo];         // 기존 전체 배열 받고
            updatedItems.splice(selectedIndex, 1);      // 기존 전체배열중, 해당 INDEX 를 삭제

        } else {                                        // 만약 업데이트된 amount 가 0 이상이라면

            updatedItems = [...state.itemInfo];         // 기존 전체 배열을 받고
            updatedItems[selectedIndex] = updatedItem;  // 해당 updatedItem 을 오버라이드
        }

        const updatedPrice = state.totalPrice - selectedItem.price; // totalPrice 는 price에 해당하는 값을 빼준다.

        return {
            itemInfo: updatedItems,
            totalPrice: updatedPrice,
        };
    }