장바구니 체크박스와 가격정보

장바구니 체크박스

저번 포스트에서는 장바구니를 저장하고 수량을 조절하는 것을 구현했다. 저번에는 추가를 했다면 삭제를 하는 방법과 수량에 따른 가격정보를 나타내보겠다.

장바구니 상품 삭제

삭제하는 법은 간단하다. 장바구니 배열에서 삭제하고 싶은 아이템을 제외하고 배열을 다시 렌더링하는 것이다. 그래서 여기에서는 자바스크립트 함수인 filter를 사용하겠다. 이 함수는 설정한 조건에 만족하는 배열을 다시 만들어준다. 그래서 삭제하고 싶은 아이템과 같지 않은 아이템만 골라 배열을 만들어주도록한다.

    function delate(e){
        const delateList = bag.filter((item)=>item.item_no !== e.item_no);
        setBag(delateList);
        localStorage.setItem('bags',JSON.stringify(delateList));
    };

이렇게하면 배열을 순회하면서 item_no값이 같지 않은 것만 찾아내어 delatelist이름으로 배열을 하나 만들고 만들어진 배열로 다시 장바구니 렌더링을 진행해준다. 그리고 localstorage에 삭제된 배열을 저장해준다.
그리고 장바구니 컴포넌트에서 삭제버튼을 만들어주면 삭제기능이 구현된다.

              <div className="delBtn">
                <button onClick={()=>delate(item)}>삭제</button>
              </div>

상품 금액 표시하기

대부분 쇼핑몰 장바구니는 모든 상품의 수량과 금액을 수집해 가격을 보여주지 않는다. 장바구니에 있어도 다시 선택할수 있는 체크박스가 존재하고 체크박스를 누른 제품만 금액이 표시되고 결제를 진행하는 방식으로 되어있다. 이 방식 그대로 만들어보려고 한다.
우선 가장 먼저 state값으로 price 기본값을 설정해준다.

    const [price,setPrice] = useState(0);

당연히 처음 값은 0으로 설정해준다. 그리고 금액을 표시하는 부분도 작성해준다.

        <div className="total_modal">
           <h1>총 합계: {price} </h1>
       </div>

이제 각 아이템마다 수량에 따른 가격정보를 불러오기만 하면 된다. 하지만 그 전에 체크박스를 구현해주어야한다.

체크박스 구현

체크박스를 만드든법은 간단하게 모든 아이템에 체크박스를 만들어주는 방법이 있다. 하지만 다수의 체크박스의 상태를 관리해야 하는 상황이 많다. 그럴때에는 체크박스도 컴포넌트로 만들어 상태관리를 해줘야한다. 물론 지금 단계에서는 장바구니 제품의 체크여부만 확인해 금액을 계산할 생각이라 컴포넌트로 만들지 않아도 되지만 연습겸 나중을 위해 컴포넌트로 만들어 구현하겠다.

function Checkbox ({ item, calculate, checked }){
    return(
        <div>
            <input
            type="checkbox"
            onChange={체크박스의 상태가 바뀔때 실행할 함수}
            checked={checked}>
            </input>
        </div>
    );
};

그리고 각 아이템마다 체크박스의 상태를 false로 설정해주기 위해 state값으로 지정한다음 props로 체크박스 컴포넌트로 넘겨주겠다.

    const[checked, setChecked] = useState(false);

이제 체크박스가 활성화되었을때 실행할 함수를 만들어주겠다.

    const calculate = (e) => {
        if(checked){
            setChecked(false);
            const total = price - e.price*piece;
            setPrice(total);
        }else{
            setChecked(true);
            const total = price + e.price*piece;
            setPrice(total);
        };
    };

if문을 사용해서 체크되었을때와 그렇지 않을때를 만들어줬다. 만약 체크박스가 비활성화, 즉 false인 경우엔 체크박스를 true로 만들어주고 아이템의 수량과 가격을 곱한 값을 합계 금액인 price에 더해준다.
만약 반대의 경우 체크박스를 false로 만들고 아이템의 수량과 가격을 곱한 값을 합계 금액에서 빼준다.

아이템 기능 추가

이렇게 했을때 금액 표시는 문제없이 구현이 되지만 약간의 아쉬운 점이 있다. 만약 체크가 활성화 된 상태에서 수량을 조절할 경우

금액 변경이 되지않고 만약 체크 전 수량보다 많은 수량을 지정한 후 삭제할 때 금액이 더 많이 차감된다.

이렇게 마이너스값이 나오기도 한다. 그래서 나는 체크되었을때 수량 조절 버튼을 비활성화시키도록 설정하겠다.
버튼을 비활성화하는 기능은 disabled라는 속성을 true로 주게되면 비활성화할 수 있다.

    const[disabled, setDisabled] = useState(false);

우선 disabled라는 속성은 체크박스를 사용할 때마다 변하는 값이기 때문에 state값으로 지정을 해준다. 그리고 처음에는 활성화되어야하기 때문에 기본값으로 false를 준다.

    <button onClick={up} disabled={disabled}>+</button>
    <button onClick={down} disabled={disabled}>-</button>

그리고 수량 버튼에 속성을 부여한 후, 체크박스에서 사용하는 calculate함수에 속성값도 변하도록 코드를 작성한다.

    const calculate = (e) => {
        if(checked){
            setChecked(false);
            const total = price - e.price*piece;
            setPrice(total);
            setDisabled(false);
        }else{
            setChecked(true);
            const total = price + e.price*piece;
            setPrice(total);
            setDisabled(true);
        };
    };

이렇게 만들어주면 체크박스가 체크되면 수량버튼이 비활성화 되고, 체크되지 않았을때에는 수량버튼이 활성화된다.

마무리

이제 쇼핑몰에서 원하는 아이템을 장바구니에 추가 및 삭제, 수량 조절, 가격 정보까지 구현했다. 하지만 상품페이지에서 상품이 보기 좋게 구분이 되어있지 않고 일자로 나열만 되어있다. 다음에는 페이지네이션을 구현해보도록 하겠다. 간편하게 라이브러리도 있지만 그건 간단하게 데이터를 불러오고 원하는 숫자만 넣으면 되기 때문에 라이브러리를 사용하지 않고 구현하도록 해보겠다.