배워서 따라하는 포플/react-context를 이용한 앱 (4) 썸네일형 리스트형 여행상품 프로젝트(4) 스텝을 이용해서 페이지 나누기 주문 페이지에서 주문확인 페이지 그리고 주문 완료 페이지로 이동해야 합니다. 그러기 위해 각 페이지마다 페이지의 스텝을 주겠습니다. 위 예시처럼 step이 0일 때 메인페이지를 보여주고, 1일때 주문확인 페이지, 2일때 주문 완료 페이지를 보여줍니다. App.js의 추가 코드입니다. state를 사용해서 step값을 설정합니다. 左) OrderPage의 추가 코드입니다. 총가격이 0이 아니면 step1로 넘어갑니다. 右) SummaryPage의 추가 코드입니다. 주문확인 페이지 구현하기 const [orderDetails] = useContext(OrderContext) const productArray = Array.from(orderDetails.products) con.. 여행상품 프로젝트(3) Context를 사용해서 데이터 제공하기 루트경로에 있는 index.js의 추가 코드입니다. 전에 배웠던 대로 작성하면 위와 같이 작성해야 합니다. 하지만 여기에 value가 여러개 들어갈 수 있으며 업데이트도 해야하는 함수들도 같이 들어가야 되서 해당 컴포넌트를 아예 함수를 만들려고 합니다. import { createContext, useState } from "react"; export const OrderContext = createContext() export function OrderContextProvider(props) { // 필요한 데이터 형식 const [orderCounts, setOrderCounts] = useState({ products: new Map(), options: n.. 여행상품 프로젝트(2) 상품 이미지 가져오기 https://github.com/Skye7095/react-context-app/tree/master/server 백엔드 내용은 위 링크에 업로드했습니다. import React, { useEffect, useState } from 'react' import axios from 'axios' import Products from './Products' import Options from './Options' const Type = ({ orderType }) => { const [items, setItems] = useState([]) useEffect(() => { loadItems(orderType); }, [orderType]) const loadItems = async (o.. 여행상품 프로젝트(1) 프로젝트 구조 만들기 프로젝트 시작 react-context-app 폴더를 만들겠습니다. 해당 프로젝트 안에 client와 server두 폴더를 더 만듭니다. cd client npm create-react-app ./ 위 명령어를 terminal에 실행해 client폴더 안에 react를 설치합니다. 프로젝트 구조 참고해서 폴더과 파일들 미리 만듭니다. Summary 페이지 Form 구현하기 import React, { useState } from 'react' const SummaryPage = () => { const [checked, setChecked] = useState(false) return ( setChecked(e.target.checked)} />{" "} 주문하려는 것을 확인하셨나요.. 이전 1 다음
