여행상품 프로젝트(3)

Context를 사용해서 데이터 제공하기

루트경로에 있는 index.js의 추가 코드입니다.

 

<OrderContext.Provider value={ } >
	<App />
</OrderContext.Provider>

전에 배웠던 대로 작성하면 위와 같이 작성해야 합니다.

하지만 여기에 value가 여러개 들어갈 수 있으며 업데이트도 해야하는 함수들도 같이 들어가야 되서

해당 컴포넌트를 아예 함수를 만들려고 합니다.

 

import { createContext, useState } from "react";

export const OrderContext = createContext()

export function OrderContextProvider(props) {

  // 필요한 데이터 형식
  const [orderCounts, setOrderCounts] = useState({
    products: new Map(),
    options: new Map()
  })

  const value = useMemo(() => {
    return [{...orderCounts}]
  }, [orderCounts])

  return (
    <OrderContext.Provider value={value} {...props} />
  )
}

src폴더 안에 context폴더 안에 OrderContext.js의 코드입니다.

context는 여러개가 같이 존재할 수 있습니다.

여기서는 주문하는 context, 경우에 따라 user의 context등등 있을 수 있어서 context폴더로 별도 관리하고 있습니다.

 

OrderContextProvider함수에 props는 바로 위에 캡처 내용 중에 <App />입니다.

 

State를 업데이트해주는 함수 작성하기

업데이트하는 함수는 OrderContext.js의 OrderContextProvider함수 안에 있습니다.

value변수에 업데이트해야 함으로 value안에 함수를 작성했습니다.

 

상품 Count를 이용한 가격 계산

  const [totals, setTotals] = useState({
    products: 0,
    options: 0,
    total: 0
  })

  const pricePerItem = {
    products: 1000,
    options: 500
  }

  const calculateSubtotal = (orderType, orderCounts) => {
    let optionCount = 0
    for(const count of orderCounts[orderType].values()) {
      optionCount += count
    }
    return optionCount * pricePerItem[orderType]
  }
  
  useEffect(() => {
    const productsTotal = calculateSubtotal("products", orderCounts)
    const optionsTotal = calculateSubtotal("options", orderCounts)
    const total = productsTotal + optionsTotal
    setTotals({
      products: productsTotal,
      options: optionsTotal,
      total
    })
  }, [orderCounts])

src폴더 안에 context폴더 안에 OrderContext.js의 추가 코드입니다.

 OrderContext.js의 수정 코드입니다.

 

const [orderData, updateItemCount] = useContext(OrderContext)

Type.js의 추가 코드입니다.

 

계산된 가격 보여주기

左) Products.js의 추가 코드입니다.

右) Options.js의 추가 코드입니다.

 

Products.js의 추가 코드 경우, handleChange함수를 만들었습니다.

여기서 updateItemCount에 이름과 현재 값을 들어갑니다.

name은 America, England등등 여행지의 이름입니다. value는 해당 여행지의 갯수입니다.

 

Options.js의 추가 코드는 체크여부에 따라 가격이 올라감으로 1혹은 0입니다.

Type.js의 총 가격 부분에 orderData.totals를 반환해줍니다.

여기서 Products인지 Options인지 구분해서 보여줌으로 [orderType]도 달았습니다.

OrderPage의 index.js의 추가 코드입니다.

context를 이용해 전체 가격을 계산해서 불러옵니다.