#패스트캠퍼스 #패스트캠퍼스부트캠프 #프론트엔드프로젝트십

복습

context에 특정 데이터를 넣어준 다음 바로 사용이 가능하다. context 객체를 생성을 하고 provider(context의 프로퍼티)를 이용해 사용하고자 하는 컴포넌트를 모두 감싸준다. 사용하고자 하는 데이터, 함수들을 감싸준 내부에 넣어주면 된다. useContext를 이용해서, theme를 변경하는 방법을 보면, 기본 value로 light, dark 값을 넣어주면 theme 변수에서 가져올 수 있지만, provider안에 value를 넣어주면 light가 아닌, dark 값을 가져오게 된다.

앱의 구조를 살펴보면, order, summary, complete로 된 page부분, component 부분, server 부분으로 나누어 생성했다. main page의 구조는, 부모 컴포넌트가 order page component 였고, type component가 2개 있었으며, 하나는 재사용하는 구조였다. 그리고 type 컴포넌트 내부에 option 컴포넌트가 위치했다. 소스코드를 보면, type component를 가져와서 사용을하고, props에 따라 조건을 주었다. ( products와 option 조건)

api에 요청이 도달하면 로직이 짜여진대로 응답을 받게 되는데, 요청 시에는 use Effect 내부에서 요청을 보냈다. dynamic하게 컴포넌트를 렌더링해주기 위해 props에 넣어주었다.

에러처리는 서버에 요청을 보낼 때, 에러 state를 true로 하고, 에러 컴포넌트를 렌더링할 수 있도록 했다. option 컴포넌트도 props로 내려준 데이터를 화면에 나타내었다. context를 생성해서 가격데이터, 상품 수, 업데이트 하는 함수를 만들어 주었는데, 함수를 이용해서 app 컴포넌트를 감싸주었다.

데이터 형식을 만들때는 map을 이용해서 키와 값을 매핑시켜 데이터 형식을 만들어 주었다. products 프로퍼티에 new Map()으로 생성한 후, 데이터를 업데이트 하는 함수에서 불변성을 지켜주기 위해(state update 시에는 불변성을 지키는 것이 중요) option과 같은 값을 넣은 새로운 map을 만들고 새롭게 set을 해주었다. state 전체도 얕은 복사를 하고, 얕은 복사한 것에 map을 넣어주었고, 함수도 value와 같이 아래로 내려주었다.

orderCount가 변할 때 총가격을 update 했는데, useEffect의 종속성 배열에 orderCount를 넣어주었다. values 메소드를 이용해서 value들만 배열에 담아준 후, count가 순서대로 순회하면 곱을 통해 총가격을 구할 수 있도록 했다. total state를 내려주고 사용할 수 있도록 하기 위해, context에 있는 데이터를 useContext 객체에 넣어주었다.

cd client
npm run start

cd server
npm run start

실행 후

#type.js
options 컴포넌트와 products 컴포넌트를 다 내려주었는데, product컴포넌트에서 값을 올려줄 때, products 부분이 변한것을 확인할 수 있다. 
옵션의 체크박스를 눌렀을 때 options 부분이 변화하도록 해야 한다. 
체크한다면 change 이벤트가 발생하는 것을 알 수 있다. 이벤트 객체를 가져오고, props로 내려온 함수를 호출해주면 된다. 옵션은 1,0의 값을 가지는데, 체크됐을 때 1의값을, 체크되지 않았을 때 0의 값을 가진다. 체크가 되었는지 알기위해 e.target.checked를 이용한다. 

#option.js

import React from 'react'

const Options = ({ name, updateItemCount }) => {
  return (
    <form>
      <input
        type="checkbox"
        id={`${name} option`}
				onChange={(e) => {
					updateItemCount(name, e.target.checked ? 1:0)
				}}
        
      />{' '}
      <label htmlFor={`${name} option`}>{name}</label>
    </form>
  )
}

export default Options

왼쪽의 updateItemCount 내부에서 값을 받아오게 된다. 

하나의 가격, 총 가격은 어떻게 넣어줄까?

#type.js
<p> 총가격: {orderData.orderType} </p>
를 넣어주면 총가격이 잘 나오는 것을 확인할 수 있다. 
합계는 totals.total을 넣어주어야 하는데 orderPage의 index.js에 위치한다. context에서 가져와야 하므로 useContext를 사용한다.
<p> 합계: orderData.totals </p>

const [orderData] = useContext(orderContext);

react-dom을 이용해서 할 수도 있지만, 순서가 정해져있으므로 step을 사용해서 주문 성공 페이지를 작성할 수 있다. (state = step) 앱 컴포넌트에서 initial state=0으로 step이라는 state를 만들어준다. step이 1일 때는 summary 컴포넌트를 보여주고, 0에서 1로 바꿀 때는 setStep을 이용하는데, 3개 페이지에 setStep을 내려주어야 한다.

#app.js
setStep을 이용해서 컨트롤해주기 위해 아래와 같이 값을 모두 내려준다. 그리고 orderpage에서 주문버튼을 눌렀을 때 setStep의 값을 1로 변경해주어야 한다. 

주문 확인 페이지 구현

map형태로 되어있는 것을 Array.from으로 배열로 바꾸어준다. 그리고 map 메소드를 이용해서 value와 key를 가져와주게 된다. 

#summarypage의 index.js
const [orderDetails] = useContext(OrderContext);
const ProductArray = Array.from(orderDetails.products);

그리고 {orderDetails.totals.products}원으로 가져온다.

const productList = productArray.map(([key,value]) => (
	<li key = {key}>
		<value} {key}
	</li>
))

그리고 return 문안의 ul태그 안의 여러개의 list로 반환해준다. 
<ul>
	{ProductList}
</ul>