💰 Cmarket

미완성의 Cmarket을 구성하는 React코드가 있다. 이 코드를 마저 작성해서 완성된 market을 구현하는 것이 목표다.

<페이지 관련 컴포넌트>

• App.js : Cmarket에서 최상위 컴포넌트 이 안에서 Items와 carItems의 상태가 들어있다.
• ItemListContainer.js : App.js의 자식 컴포넌트로 상품 리스트 페이지를 나타내는 컴포넌트
• ShoppingCart.js : App.js의 자식 컴포넌트로 찜 목록 리스트 페이지를 나타내는 컴포넌트

<페이지 내부 컴포넌트>

• Nav.js : App.js의 자식 컴포넌트로 각 페이지 의 네비게이션 을 나타내는 컴포넌트
• CartItem.js : ShoppingCart.js의 자식 컴포넌트로 상품을 나타내는 컴포넌트
• Item.js : ItemListContainer.js의 자식 컴포넌트로 상품을 나타내는 컴포넌트
• OrderSummary.js : ShoppingCart.js의 자식 컴포넌트로 상품을 종합적으로 표시해주는 컴포넌트
• state.js : 상품들이items와 cartItems로 배열의 형태로 객체 안에 담겨있는 일종의 DB

// state.js
export const initialState =
{
  "items": [
    {
      "id": 1,
      "name": "노른자 분리기",
      "img": "../images/egg.png",
      "price": 9900
    },
    {
      "id": 2,
      "name": "2020년 달력",
      "img": "../images/2020.jpg",
      "price": 12000
    },
    {
      "id": 3,
      "name": "개구리 안대",
      "img": "../images/frog.jpg",
      "price": 2900
    },
    {
      "id": 4,
      "name": "뜯어온 보도블럭",
      "img": "../images/block.jpg",
      "price": 4900
    },
    {
      "id": 5,
      "name": "칼라 립스틱",
      "img": "../images/lip.jpg",
      "price": 2900
    },
    {
      "id": 6,
      "name": "잉어 슈즈",
      "img": "../images/fish.jpg",
      "price": 3900
    },
    {
      "id": 7,
      "name": "웰컴 매트",
      "img": "../images/welcome.jpg",
      "price": 6900
    },
    {
      "id": 8,
      "name": "강시 모자",
      "img": "../images/hat.jpg",
      "price": 9900
    }
  ],
  "cartItems": [
    {
      "itemId": 1,
      "quantity": 1
    },
    {
      "itemId": 5,
      "quantity": 7
    },
    {
      "itemId": 2,
      "quantity": 3
    }
  ]
}

📖 페이지 전환 : Client Side Routing

우리는 지금 까지 서버를 통한 라우팅을 배웠다. 지금 이 페이지에서는 서버를 통하지 않고 클라이언트에서 라우팅을 실시하려고 한다. 그 전에 다시 한번 라우팅이 무엇인가? 를 집고 넘어가자.

라우팅 : URL 조건에 따른 분기를 나누는 것

서버를 통해서 라우팅을 나누는 것은 이전에 알아보았다. 그렇다면 Client Side Routing는 어떻게 구현할까? 아래 코드를 통해 살펴보자.

return (
    <Router>
      <Nav />
      <Switch>
        <Route exact={true} path="/">
          <ItemListContainer items={items} />
        </Route>
        <Route path="/shoppingcart">
          <ShoppingCart cartItems={cartItems} items={items} />
        </Route>
      </Switch>
    </Router>
  );

위 코드는 App.js 내에서 최종적으로 화면에 출력하는 리턴 값을 보여주는 것이다. 코드를 살펴보면 Router, Switch, Route로 구분을 지어줍니다.

라우터가 / 면 ItemListContainer 컴포넌트를 보여주고 /shoppingcart면 Soppingcart 컴포넌트를 출력해준다.

그렇다면 이 경로는 어떻게 해서 나눠 표시할 수 있는가 그건 Nav.js를 살펴보면 된다.

function Nav() {

  return (
    <div id="nav-body">
      <span id="title">
        <img id="logo" src="../logo.png" alt="logo" />
        <span id="name">CMarket</span>
      </span>
      <div id="menu">
        <Link to="/">상품리스트</Link>
        <Link to="/shoppingcart">
          장바구니<span id="nav-item-counter">0</span>
        </Link>
      </div>
    </div>
  );
}

위 코드에서 Link 컴포넌트에 to속성을 통해서 클릭시 라우터가 변경되도록 성정할 수 있다.

💳 장바구니에 추가 및 상품 갯수 업데이트 : Hook

먼저 필요한 것은 App.js에 상품리스트의 state와 카트리스트의 state를 생성하고 그 state를 다룰 수 있는 함수를 Hook을 통해서 작성한다.

// App.js

// initialState는 import를 통해서 state에 있는 값을 받아온 것이다.
function App() {

  const [items, setItems] = useState(initialState.items);
  const [cartItems, setCartItems] = useState(initialState.cartItems);

  return (
    ...
}

이 후 Item 안에 있는 장바구니 담기 버튼을 클릭하면 장바구치에 상품이 추가되고 Nav 컴포넌트에 상품의 갯수가 업데이트 되도록 코드를 작성하면 된다.

// App.js
function App() {

  const [items, setItems] = useState(initialState.items);
  const [cartItems, setCartItems] = useState(initialState.cartItems);
  
  const addToCart = (itemId) => {
    const found = cartItems.filter((el) => el.itemId === itemId)[0]
    // 인자로 받은 itemId의 상품이 이미 cartItems에 있으면 그 상품을 found에 할당해준다.
    if(found) { // found가 있으면 즉, 이미 카트목록에 있는 것이면
      setQuantity(itemId, found.quantity + 1)
      //상품리스트에 추가하는 것이 아닌 그 상품의 quantitiy값을 증가시킨다.
    }else{ // found가 없으면 즉, 카트목록에 없는 상품이면
      setCartItems([...cartItems, {itemId, quantity: 1}])
      //상품 목록에 해당 상품의 아이디와 수량을 추가해준다.
    }
  }
  
  const setQuantity = (itemId, quantity) => { //해당 아이템 아이디와 수량을 입력 받는다.
    const found = cartItems.filter((el) => el.itemId === itemId)[0] //해당 아이템 할당
    const idx = cartItems.indexOf(found) // 해당 아이템의 위차 값 할당
    const cartItem = { //해당 아이템을 수량을 변경해서 다시 정의한다.
      itemId,
      quantity
    }
    setCartItems([...cartItems.slice(0, idx), cartItem, ...cartItems.slice(idx + 1)])
    //해당 아이템의 위치에 수량을 변경해서 다시 정의한 아이템을 끼워 넣어서 재 정의한다.
  }


  return (
    ...
    <Nav cartItems={cartItems}/>
    ...
    <ItemListContainer items={items} handleAdd={addToCart} />
    // addToCart 함수를 ItemListContainer 컴포넌트에 props로 전달해준다.
    ...
}

// ItemListContainer.js
function ItemListContainer({ items, handleAdd }) {
  const handleClick = () => handleAdd(item.id)
  // handleClick을 실행하면 해당 아이템의 id 값을 가지고 handleAdd함수를 실행한다.
  return (
    <div id="item-list-container">
      <div id="item-list-body">
        <div id="item-list-title">쓸모없는 선물 모음</div>
        {items.map((item, idx) => <Item item={item} key={idx} handleClick={handleClick} />)}
      </div>
    </div>
  );
}

// Item.js
function Item({ item, handleClick }) {

  return (
    <div key={item.id} className="item">
      <img className="item-img" src={item.img} alt={item.name}></img>
      <span className="item-name">{item.name}</span>
      <span className="item-price">{item.price}</span>
      <button className="item-button" onClick={(e) => handleClick(e, item.id)}>장바구니 담기</button>
    </div>
  )
}

위 코드를 작성하고 아이템 리스트에 있는 상품의 장바구니 담기를 클릭하면 cartItems배열에 해당 아이템이 담기고 이미 해당 아이템이 있다면 수량을 늘릴 것이다.

그리고 Nav컴포넌트에 표시되는 상품의 갯수 또한 변경되어야 할 것이다.

// Nav.js
function Nav({ cartItems }) {

  return (
    <div id="nav-body">
      <span id="title">
        <img id="logo" src="../logo.png" alt="logo" />
        <span id="name">CMarket</span>
      </span>
      <div id="menu">
        <Link to="/">상품리스트</Link>
        <Link to="/shoppingcart">
          장바구니<span id="nav-item-counter">{cartItems.length}</span>
        </Link>
      </div>
    </div>
  );
}

장바구니 옆에 표시되는 상품의 갯수는 cartItems 배열에 객체의 형태로 담겨 있다. 다시 말해서 cartItems의 길이가 결국 담겨있는 상품의 갯수가 된다는 말이다. 때문에 다음과 같이 작성해주면 된다.

🧺 장바구니로부터 제거 : Hook

장바구니로 부터 상품을 제거하려면 CartItem에 있는 삭제 버튼 을 클릭했을 때 cartItems의 배열에서 해당 상품이 사라지게 하면 된다. 이를 구현하는 다음 코드를 살펴보자

// App.js
function App() {

  const [items, setItems] = useState(initialState.items);
  const [cartItems, setCartItems] = useState(initialState.cartItems);

  ...

  const removeFromCart = (itemId) => {
    setCartItems(cartItems.filter((el) => el.itemId !== itemId))
    // 인자로 받은 itemId와 일치하지 않는 값들을 필터링해서 cartItems를 다시 할당한다.
  }

  return (
    ...
    <ShoppingCart cartItems={cartItems} items={items} handleDelete = {removeFromCart}/>
    ...
    )
}

// ShoppingCart.js
function ShoppingCart({ items, cartItems, handleDelete: onDelete })