장바구니 만들기

쇼핑몰을 만드는데 장바구니 만들기를 도전하고 있다.

우선 상품 상세보기에 들어가면

장바구니에 추가할수 있는 버튼이 있다.

생각 해본 방식이

1. 버튼을 클릭
2. 클릭후 카트에 담겨야한다.
   • 이때 카트에는 상품 정보(이름,가격,상품이미지,수량)이 담겨야한다.
3. 담긴 데이터는 카트 페이지에서 리스트로 뽑아낸다.
4. 이떄 클릭한 상품의 정보만이 추가되야한다.

추가로 이 담긴 데이터가 새로고침시에 유지될수 있게 LocalStorage로 데이터를 담아놓을수 있게 해야겠다.

상세보기 페이지에서 작성한 코드

    const [cartItems, setCartItems] = useState<CartItemType[]>(
        JSON.parse(saved) === null ? [] : JSON.parse(saved)
        // localstorage가 null값일때는 빈배열을 리턴 아니면 있는 내용 그대로 
        // 설정을 해놓지 않는다면 카트가 읽지를 못함
    )

    const handleAddToCart = (clickedItem: CartItemType) => {
        setCartItems((prev) => {
            const isItemInCart = prev.find((item) => item.id === clickedItem.id)
            /// click한 아이템의 아이디가 카트 배열에 있는지 확인해야한다.
            /// 있다면 그 내용을 찾아낸다.
            // 아이템이 있다면, 제품 정보 및 수량이 리턴 아니면 그냥 있는 그대로
            if (isItemInCart) {
                return prev.map((item) =>
                    item.id === clickedItem.id ? { ...item, amount: item.amount + 1 } : item
                )
            }
            return [...prev, { ...clickedItem, amount: 1 }]
            // 아예 빈카트(undefined)상태일떄는 새로운 제품들은 append되는식
            // 수량은 1개만 추가
        })
    }

설명은 주석처리로 해놨습니다.

하면서 어려웠던점

• 데이터를 카트페이지로 넘겨줘야할때
  - 해결 방법

  
  let cartStorage: any = localStorage.getItem('cartStorage')
  const list: CartItemType[] = JSON.parse(cartStorage)

  localStorage에 저장되 있는 것을 불러와서 다시 객체화시켜서
  끄집어내서 쓰는식으로 했습니다.
• 데이터를 유지해야할때.
  - 상태 초기값을 아예 localStorage 값을 설정
  

다시 시도해보고 싶은게 있다면?

• 이 부분을 zustand로 처음에 만들었는데 제품 정보는 잘 받아오는데
  클릭시 수량 카운팅이 안되서 포기했습니다.

  하지만 전역상태관리를 쓸때가 지금 하는 방식보다 좀더 효율적이라고 판단이 되서 다른 전역상태관리를 사용해서 리팩토링 해볼 예정입니다.