전체 글 (166) 썸네일형 리스트형 여행상품 프로젝트(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 ··· 4 5 6 7 8 9 10 ··· 56 다음
