[Firebase] STUDIO-장바구니

쇼핑카트 기능구현

firebase의 get,set,remove를 이용하여 장바구니 기능을 만든다.

firebase 사용하기
1. 설정하기
2. 내부적으로 필요한 로직을 가지고 만들기
3. 외부 컴포넌트에서 사용할수 있게 함수만들기

1. firebase에서 조회, 추가 및 업데이트, 삭제 만들기

// api/firebase.js
import { getDatabase, ref, set, get, remove } from "firebase/database";

export async function getCart(userId) {
  return get(ref(database, `carts/${userId}`)) //사용자id별로 carts를 보관
    .then((snapshot) => {
      const items = snapshot.val() || {}; //snapshot.val()롤 items을 가져오고 없다면 빈 {}
      return Object.values(items);
    });
}

export async function addOrUpdateToCart(userId, product) {
  return set(ref(database, `carts/${userId}/${product.id}`), product); //product을 추가
}

export async function removeFromCart(userId, productId) {
  return remove(ref(database, `carts/${userId}/${productId}`));
}

• 주어진 사용자의 아이디에 해당하는 카트내역을 가져온다.
  get을 사용하고 ref를 이용해서 어떤 데이터를 가져올 것인지 명시해준다.
• firebase에서는 추가 또는 업데이트를 동일한 함수를 사용하므로 하나의 함수로 만들어준다.
• set을 이용하여 ref지정해주고 product을 추가한다.
  추가 및 업데이트에 추가되는 product는 ProductDetail.js에서 onClick이벤트 내에 설정하는 product이며, 제품Id, 가격, 수량 정보를 담는다.

2. 받아올 사용자의 정보 (uid) 설정하기

// context/AuthContext.js
<AuthContext.Provider
      value={{ user, login, logout }} // uid: user && user.uid 추가
    >
      {children}
    </AuthContext.Provider>

• AuthContext.js에서 value안에 uid(user, user.id)를 추가해주고 Detail.js에서 useAuthContext()를 이용하여 uid를 받아온다.

3. 추가 버튼에 적용할 onClick이벤트 만들기

// src/ProductDetail.js

import { useState } from "react";

function ProductDetail() {
  const { uid } = useAuthContext();
  //AuthContext에 uid: user && user.uid도 추가로 보내줌
  
  const [selected, setSelected] = useState(options && options[0]);
  const handleSelect = (e) => setSelected(e.target.value);
  const handleClick = (e) => {
    const product = { id, image, title, options: selected, quantity: 1 };//product을 만들어주고
    //quantity:1 수량 1
    addOrUpdateToCart(uid, product);// 추가 및 업데이트에 담아서 보낸다.
  };
  return (
    
   				 ...
    
            <label htmlFor="select">
              color :
            </label>
            <select
              id="select"
              onChange={handleSelect}
              value={selected}
            >
              {options &&
                options.map((op, index) => <option key={index}>{op}</option>)}
            </select>
          </div>
          <Button text="cart" onClick={handleClick} />
        </div>
      </div>
    </section>
  );
}
export default ProductDetail;

옵션지정 : 옵션의 value를 state로 지정해주고 onChange이벤트를 이용하여 e.target.value를 받는다.

• useAuthContext()를 이용하여 AuthContext에서 받아올 사용자의 정보, 설정한 uid를 가져온다.
• 추가 및 업데이트 함수에 담을 product을 설정하고 함수내에 uid와 product을 담아 이벤트를 실행시킨다.

이벤트 실행 => firebase함수 실행 => Realtime Database추가
1. onClick이벤트를 이용하여 카트저장 버튼을 누르면 카트에 추가되는 함수를 실행한다.
2. 사용자의 아이디와 제품정보를 만들어서 firebase함수를 호출해준다.
3. fitebase Realtime Database내에 carts가 생성되고 uid와 설정한 product가 추가된다.

마치기

어렵고 복잡하게 느껴졌던 장바구니가 Context를 이용하니 간단하게 느껴졌다.
기능적인 함수를 만들어 따로 관리하고 해당 이벤트가 적용될때 필요한 함수를 불러와서 실행시킨다.
정리하면서 다시 이해하기!