[DAY - 88] Redux 장바구니 예제

                {
                    cart.length === 0 ? <div className='cart-empty'><h2>장바구니 비어있음</h2><Link to='/'>쇼핑하러 가기</Link></div>
                        :
                        <div className='total'>
                            <span>총 개수 : {cart.length}</span>
                            <span>총 금액 : {totalPrice.toLocaleString('kr-KR')}</span>
                            <span></span>
                        </div>
                }

 
Redux, Router를 이용해서 장바구니 페이지를 구현했다.
 

1) Router 구조

const App = () => {
  return (
    <BrowserRouter>
      <Routes >
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="/cart" element={<Cart />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

const Layout = () => {
    return (
        <div id="wrap">
            <Header />
            <main className="main">
                <Outlet />
            </main>
            <Footer />
        </div>
    );
};

 
Layout, Outlet을 이용해서 header와 footer를 항상 표시되게 했다.
Home엔 아이템들이 출력된다.
 

2) 장바구니 버튼

 
주문하기 버튼을 클릭하면 버튼이 취소하기로 변경이 되고 우측 상단에 장바구니에 담긴 총 아이템 개수를 나타내준다.
 

                <li><Link to='/cart'>Cart / {cart.length}</Link></li>

 
개수를 나타내 주는 navigation 부분
 

                {
                    cart.find(item => item.id === id) ?
                        <button onClick={() => dispatch(removeCart(id))} className='off'>취소하기</button>
                        :
                        <button onClick={() => dispatch(addCart(item))}>주문하기</button>
                }

 
 
 
장바구니에 담기지 않았을 때 주문하기 버튼을 클릭하면 addCart 함수를 호출하고, 담긴 상태면 취소하기 버튼이 활성화되며 클릭 시 removeCart 함수를 호출한다.
 

        addCart(state, action) {
            state.cart = [...state.cart, action.payload];
        },
        removeCart(state, action) {
            state.cart = state.cart.filter(item => item.id !== action.payload)
        }

 
각각 item(객체 전부), id를 매개변수로 넘겨주기 때문에 cart 배열에 추가해 주고, 해당 id로 제거해 주는 기능을 한다.
 

3) 장바구니

    <article>
      <img src={image} alt={title} />
      <div>
        <h3> {title} </h3>
        <span>{
          price === 0 ? '무료' : `${price.toLocaleString("kr-KR")} 원`
        }</span>
      </div>
      <button onClick={() => dispatch(removeCart(id))}> 삭제 </button>
    </article>

 
장바구니에 담긴 상품의 삭제 버튼을 누르면 마찬가지로 removeCart 함수를 호출해 cart 배열에서 해당 아이템의 객체를 제거하게 된다.
 

                {
                    cart.length === 0 ? <div className='cart-empty'><h2>장바구니 비어있음</h2><Link to='/'>쇼핑하러 가기</Link></div>
                        :
                        <div className='total'>
                            <span>총 개수 : {cart.length}</span>
                            <span>총 금액 : {totalPrice.toLocaleString('kr-KR')}</span>
                            <span></span>
                        </div>
                }

 
장바구니에 담긴 상품이 없을 시(cart.length===0) 장바구니가 비어있다는 텍스트가 출력이 되고, 장바구니에 아이템이 있을 시 총 개수와 총금액을 알려준다.
 

    const totalPrice = cart.reduce((total, item) => total + item.price, 0);

 
총금액의 경우 cart 배열 안의 price의 값만 더해주면 되기 때문에 reduce를 사용하였다.