🚩 React

firebase 이용하여 데이터 저장(미완성)

📝 설명

• firebase를 사용하여 내용을 입력받아 출력할 수 있도록 코드 수정 예정

✒️ 사용법

입력

App.js

import React, { useCallback, useEffect, useState } from "react";
import "./App.scss";
import MovieList from "./components/MovieList";
import AddMovie from "./components/AddMovie";

function App() {
  const [movies, setMovies] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null); // 에러 없는 상태

  /*
  // 비동기⭕
  function fetchMovieHandler() {
    fetch("https://swapi.dev/api/films/")
      .then((response) => {
        return response.json(); // json 대신 우리가 사용할 수 있는 자바스크립트 형태로 변환
      })
      .then((data) => {
        const transformedMovies = data.results.map((movieData) => {
          return {
            id: movieData.episode_id,
            title: movieData.title,
            openingText: movieData.opening_crawl,
            releaseDate: movieData.release_date,
            // 필요한 4개만 새로운 객체로 반환
          };
        });

        setMovies(transformedMovies);
      });
  }
  */

  // 비동기❌ (async, await)
  /*
  async function fetchMovieHandler() {
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch("https://swapi.dev/api/films/");

      if (!response.ok) {
        throw new Error("에러 발생"); // 뒷부분 코드 진행x
      }

      const data = await response.json();
      const transformedMovies = data.results.map((movieData) => {
        return {
          id: movieData.episode_id,
          title: movieData.title,
          openingText: movieData.opening_crawl,
          releaseDate: movieData.release_date,
          // 필요한 4개만 새로운 객체로 반환
        };
      });
      setMovies(transformedMovies);

    } catch(error) {
      setError(error.message);
    }
    setIsLoading(false);
  }
  */

  // const 형식으로 변경
  const fetchMovieHandler = useCallback(async () => {
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch('https://movietest-34408-default-rtdb.asia-southeast1.firebasedatabase.app/movie.json');

      if (!response.ok) {
        throw new Error("에러 발생"); // 뒷부분 코드 진행x
      }

      const data = await response.json();
      // console.log("받아온 data는? : ", data);
      // firebase에서 받아온 파일을 변환시킨 객체
      
      const loadMovies = []; // 받아온 객체를 배열로 선언

      for (const key in data) {
        // 배열 안에 집어넣음
        loadMovies.push({
          id: key,
          title: data[key].title,
          openingText: data[key].openingText,
          releaseDate: data[key].releaseDate,
        })
      }
      // console.log("loadMovies는? : ", loadMovies);
      setMovies(loadMovies);
      
      // 위의 for문으로 대체
      // const transformedMovies = data.results.map((movieData) => {
      //   return {
      //     id: movieData.episode_id,
      //     title: movieData.title,
      //     openingText: movieData.opening_crawl,
      //     releaseDate: movieData.release_date,
      //     // 필요한 4개만 새로운 객체로 반환
      //   };
      // });
      // setMovies(transformedMovies);
    } catch (error) {
      setError(error.message);
    }
    setIsLoading(false);
  }, []); // [] - 화면 열릴 때 처음에만 작동됨

  // fetchMovieHandler 함수가 호출될 때도 발생.
  // 함수는 외부에서 바뀔 수 있음(ex. 변수 받아옴) -> 무한루프 가능성 있음
  useEffect(() => {
    fetchMovieHandler();
  }, [fetchMovieHandler]);
  // useCallback(()=>{}, [])

  // 추가하는 함수
  const addMovieHandler = (item) => {
    // console.log(item);
    fetch(
      "https://movietest-34408-default-rtdb.asia-southeast1.firebasedatabase.app/movie.json",
      {
        method: "POST", // firebase에 리소스 만듦
        body: JSON.stringify(item), // js 객체를 json으로 변환
        // headers: { "Content-Type": "application/json" }, // firebase에서는 생략 가능, API에서 어떤 컨텐츠가 전달되는지 알 수 있게 해줌
      }
    );
  };

  let content = <p>NO MOVIES</p>;
  if (isLoading) {
    content = <p>LOADING...</p>;
  }
  if (movies.length !== 0) {
    content = <MovieList movie={movies} />;
  }
  if (error) {
    content = <p>{error}</p>;
  }

  return (
    <main>
      <section>
        <AddMovie onAddMovie={addMovieHandler} />
      </section>

      <section>
        <button onClick={fetchMovieHandler}>Fetch Movie</button>
      </section>

      <section>
        {content}
        {/* isLoading이 false일 때
        {!isLoading && <MovieList movie={movies} />}
        {!isLoading && movies.length === 0 && <p>NO MOVIES</p>}
        {isLoading && <p>LOADING...</p>} */}
      </section>
    </main>
  );
}

export default App;

MovieList.jsx

import React from "react";
import Movie from "./Movie";

const MovieList = (props) => {
  return (
    // map()을 사용하여 화면에 출력
    <ul>
      {props.movie.map((item) => (
        <Movie
          key={item.id}
          id={item.id}
          title={item.title}
          releaseDate={item.releaseDate}
          openingText={item.openingText}
        />
      ))}
    </ul>
  );
};

export default MovieList;

Movie.jsx

import React from "react";

const Movie = (props) => {
  return (
    <li className="movie">
      <h2>{props.title}</h2>
      <h3>{props.releaseDate}</h3>
      <p>{props.openingText}</p>
    </li>
  );
};

export default Movie;

AddMovie.jsx

import React, { useRef } from "react";

const AddMovie = (props) => {
  const titleRef = useRef("");
  const textRef = useRef("");
  const dataRef = useRef("");

  const submitHandler = (e) => {
    e.preventDefault();

    const movie = {
      title: titleRef.current.value,
      openingText: textRef.current.value,
      releaseDate: dataRef.current.value,
    };
    props.onAddMovie(movie);
    clearValue();
  };

  // 입력 후 input 창 초기화
  const clearValue = () => {
    titleRef.current.value = "";
    textRef.current.value = "";
    dataRef.current.value = "";
  }


  return (
    <form onSubmit={submitHandler}>
      <div className="control">
        <label htmlFor="title">title</label>
        <input type="text" id="title" ref={titleRef} />
      </div>

      <div className="control">
        <label htmlFor="text">text</label>
        <textarea id="text" rows="5" ref={textRef}></textarea>
      </div>

      <div className="control">
        <label htmlFor="date">date</label>
        <input type="text" id="date" ref={dataRef} />
      </div>
      <button>Add Movie</button>
    </form>
  );
};

export default AddMovie;

출력

• 이미지로 대체
  
  
  
  
  

🔗 참고 링크 & 도움이 되는 링크

• chrome serviceworker
• firebase

---

🚩 React

음식 주문 사이트 코딩(기존 내용 추가/수정)

📝 설명

• 장바구니에 음식을 한 개씩 추가하고 제거할 수 있게 코딩
• 장바구니에 음식을 추가/제거 할 때마다 금액 계산
• css module을 사용하여 한 컴포넌트에 모듈 한 개씩 생성하여 작업
• firebase에 저장되어 있는 내용 출력

✒️ 코드 작성

• 컴포넌트마다 css module 따로 있기 때문에 css는 제외하고 컴포넌트만 작성

입력

App.js

import { useState } from 'react';
import Cart from './components/Cart/Cart';
import Header from './components/Layout/Header';
import Meals from './components/Meals/Meals';
import CartProvider from './store/CartProvider';
import './App.css';

function App() {
  const [cartInShow, setCartInShow] = useState(false);
  //cart모달창이 보이고 안보이고, 상태관리

  //cart모달 보이게 하는 함수
  const showCartHandler=()=>{
    setCartInShow(true)
  }
  
  //cart모달 안보이게 하는 함수
  const hideCartHandler=()=>{
    setCartInShow(false)
  }

  return (
    // CartProvider 태그 안에서 cart-context의 내용을 전부 갱신/삭제/추가 할 수 있음
    <CartProvider>
      { cartInShow && <Cart onClose ={hideCartHandler} />}
      {/* cartInShow가 true일때만 모달이 보임 */}
      <Header onShowCart={showCartHandler}/>
      <main>
        <Meals />
      </main>
    </CartProvider>
  );
}

export default App;

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <title>종합예제</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!-- portal 지정 -->
    <div id="overlay"></div>
    <div id="root"></div>
  </body>
</html>

• components 폴더 내 Layout 폴더
  Header.jsx

import React from 'react'
import classes from "./Header.module.css";
import mealsImg from "../../asset/meals.jpg";
import HeaderCartButton from './HeaderCartButton';
//public에 놓고 일반 웹페이지에서 이미지 쓰듯이 사용할 수도 있음

const Header = (props) => {
  return (
    <>
      <header className={classes.header}>
        <h1>First React Meals</h1>
        {/* onclick : props 이름 */}
        <HeaderCartButton onclick={props.onShowCart} />
      </header> 
      <div className={classes["main-image"]}>
        {/* main-image 클라스는 안에 -가 있어서 .을 못 씀 */}
        <img src={mealsImg} alt="meals" />
      </div>


    </>
  )
}

export default Header;

HeaderCartButton.jsx

import React, { useContext, useEffect, useState } from "react";
import CartIcon from "../Cart/CartIcon";
import classes from "./HeaderCartButton.module.css";
import CartContext from "../../store/cart-context";

// useEffect() : 어떤 일이 발생할 때마다 실행되는 React hook

const HeaderCartButton = (props) => {
  const cartCtx = useContext(CartContext);
  // const numberOfCartItems = cartCtx.items.length; // = 아이템 숫자를 의미 -> 아이템 안의 amount를 합해줘야 함
  const [btnIsHigh, setBtnIsHigh] = useState(false); // 버튼 상태(애니메이션 적용 여부)
  const { items } = cartCtx; // 구조분해

  // 컨텍스트에 배열이 바뀔 때 적용
  useEffect(() => {
    // 항목이 없을 때
    if (items.length === 0) {
      return;
    }
    setBtnIsHigh(true);

    const timer = setTimeout(() => {
      setBtnIsHigh(false);
    }, 300);

    // 사이드이펙트 정리, 클린업 함수 (눈에 보이지 않지만 코드적으로 데이터를 깔끔하게 정리함.)
    return () => {
      clearTimeout(timer);
    };
  }, [items]);

  // 아이템에 변화가 있을 때만 bump 클래스 들어감
  const btnClass = `${classes.button} ${btnIsHigh ? classes.bump : ""}`;

  // 위에서 구조분해 했기 때문에 cartCtx.items라고 안 써도 됨
  const numberOfCartItems = items.reduce((sum, item) => {
    return (sum += item.amount);
  }, 0);
  // 배열.reduce((합해진 값, value) => { 합해진값 + 밸류 }, 합해진 값의 초기값);

  return (
    <button className={btnClass} onClick={props.onclick}>
      <span className={classes.icon}>
        <CartIcon />
      </span>
      <span>Your Cart</span>
      <span className={classes.badge}>{numberOfCartItems}</span>
    </button>
  );
};

export default HeaderCartButton;

• components 폴더 내 UI 폴더
  Card.jsx

import React from 'react'
import classes from "./Card.module.css";

const Card = (props) => {
  return (
    <div className={classes.card}>{props.children}</div>
  )
}

export default Card

input.jsx

import React from "react";
import classes from "./Input.module.css";

const Input = props => {
  return (
    <div className={classes.input}>
      <label htmlFor={props.input.id}>{props.label}</label>
      <input ref={props.propsRef} {...props.input} />
    </div>
  );
};

export default Input;

/* 
  forwardRef()
    - 전달받은 ref 어트리뷰트를 하부 트리 내의 다른 컴포넌트로 전달할 때 함수 부분을 감싸서 사용
*/

Modal.jsx

//모달 팝업창
import React from 'react'
import ReactDOM from 'react-dom';
import classes from './Modal.module.css'

//모달뒤 까만 반투명
const Backdrop=(props)=>{
  return <div className={classes.backdrop} onClick={props.onClose} > </div>
}

//실제 모달(가운데 하얀네모)
const ModalOverlay=(props)=>{
  return (
    <div className={classes.modal}>
      <div>{props.children}</div>
    </div>
  )
};


// portal을 출력할 위치를 가져옴
const portalElement = document.getElementById('overlay');

//메인 컴포넌트
const Modal = (props) => {
  return (
    <div>
      {/* {ReactDOM.createPortal(<Backdrop onClose={props.onClose} />,portalElement)}
      {ReactDOM.createPortal(<ModalOverlay>{props.children}</ModalOverlay>, portalElement )}       */}
      {ReactDOM.createPortal(<Backdrop onClose={props.onClose} />, portalElement)}
      {ReactDOM.createPortal(<ModalOverlay>{props.children}</ModalOverlay>, portalElement)}
    </div>
  )
}

export default Modal;
//  createPortal(child(자식요소), container(포탈이름))

• components 폴더 내 Meals 폴더
  Meals.jsx

import React from 'react'
import AvailableMeals from './AvailableMeals'
import MealsSummary from './MealsSummary'

const Meals = () => {
  return (
    <>
      <MealsSummary />
      <AvailableMeals />
    </>
  )
}

export default Meals

MealsSummary.jsx

import React from "react";
import classes from "./MealsSummary.module.css";

const MealsSummary = () => {
  return (
    <section className={classes.summary}>
      {/* <h2>MealsSummary.js --</h2> */}
      <p>
        Choose your favorite meal from our broad selection of available meals
        and enjoy a delicious lunch or dinner at home.
        </p>
      
      <p>
        All our meals are cooked with high-quality ingredients, just-in-time and of course by experienced
        chefs!
      </p>
    </section>
  );
};

export default MealsSummary;

AvailableMeals.jsx

import React, { useEffect, useState } from "react";
import Card from "../UI/Card";
import classes from "./AvailableMeals.module.css";
import MealItem from "./MealsItem/MealItem";

// const DUMMY_MEALS = [
//   {
//     id: "m1",
//     name: "Sushi",
//     description: "Finest fish and veggies",
//     price: 22.9998,
//   },
//   {
//     id: "m2",
//     name: "Schnitzel",
//     description: "A german specialty!",
//     price: 16.5,
//   },
//   {
//     id: "m3",
//     name: "Barbecue Burger",
//     description: "American, raw, meaty",
//     price: 12.991,
//   },
//   {
//     id: "m4",
//     name: "Green Bowl",
//     description: "Healthy...and green...",
//     price: 18.993,
//   },
// ];

const AvailableMeals = () => {
  const [meals, setMeals] = useState([]); // 백엔드에 저장되어 있는 메뉴
  const [isLoading, setIsLoading] = useState(true); // 화면이 열리면 무조건 로딩화면이 뜨도록 true 설정
  const [httpError, setHttpError] = useState(); // 에러 문구를 저장하기 위한 상태 설정

  useEffect(()=>{
    // 비동기 함수는 리턴값이 promise로 나옴
    const fetchMeals = async () =>{
      const response = await fetch('https://meal-2269f-default-rtdb.asia-southeast1.firebasedatabase.app/meals.json');

      // fetch의 결과물(리턴값) = response.ok = response가 true
      if (!response.ok) {
        throw new Error("에러 발생💥");
      }

      const data = await response.json()  //객체 형식으로 저장됨
      console.log('data?',data)

      const loadMeals = [];

      for (const key in data) {
        loadMeals.push({
          id: key,
          name: data[key].name,
          description: data[key].description,
          price: data[key].price
        })
      }
      setMeals(loadMeals);
      setIsLoading(false);
    }

    /*
    try {
      fetchMeals();
    } catch (error) {
      setIsLoading(false);
      setHttpError(error.message);
    }
    */
    // fetchMeals는 async를 사용 -> promise를 반환 -> 에러 (useEffect 안에서 사용했기 때문에 문제 발생)
    // 해결방법 - 별도의 함수를 한 개 더 추가 or 아래 방법

      fetchMeals().catch((error) => {
        setIsLoading(false);
        setHttpError(error.message);
      });
    
    // fetchMeals();
  }, [])
  // console.log("meals는? : ", meals);

  if(isLoading){
    return(
      <section className={classes.mealsLoading}>
        <p>Loading....</p>
      </section>
    )
  }

  if(httpError) {
    return(
      <section className={classes.mealsError}>
        <p>{httpError}</p>
      </section>
    )
  }

  const mealsList = meals.map((meal)=>
    <MealItem 
      key={meal.id} 
      id={meal.id} 
      name={meal.name} 
      description={meal.description} 
      price={meal.price}/>
  )

  return (
    <section className={classes.meals}>
      <Card>
        <ul>
          {mealsList}
        </ul>
      </Card>
    </section>
  )
}

export default AvailableMeals;

• Meals 폴더 내 MealsItem 폴더
  MealItem.jsx

import React, { useContext } from "react";
import classes from "./MealItem.module.css";
import MealItemForm from "./MealItemForm";
import CartContext from "../../../store/cart-context";

const MealItem = (props) => {
  const cartCtx = useContext(CartContext);
  const price = `$${props.price.toFixed(2)}`; 
  // toFixed(n) : 소수점 n번째 자리까지만 출력(반올림). 첫 번째 자리까지만 있으면 두 번째 자리는 0으로 출력

  // 함수 정의
  // context에 전달하는 함수 (amount : 수량)
  // 인자값은 MealItemForm에서 value를 받아옴
  const addToCartHandler = (amount) => {
    console.log("수량은? : ", amount);
    
    // 여기서 addItem을 가져와서 작동시킴
    cartCtx.addItem({
      id: props.id,
      name: props.name,
      amount: amount, // amount로 받아와서
      price: props.price,
    });
  };

  return (
    <li className={classes.meal}>
      <div>
        <h3>{props.name}</h3>
        <div className={classes.description}>{props.description}</div>
        <div className={classes.price}>{price}</div>
      </div>
      <div>
        {/* mealitem에서 mealitemform으로 보냄 (props) */}
        <MealItemForm id={props.id} onAddToCart={addToCartHandler} />
      </div>
    </li>
  );
};

export default MealItem;

MealItemForm.jsx

import React, { useRef } from "react";
import Input from "../../UI/Input";
import classes from "./MealItemForm.module.css";

const MealItemForm = (props) => {
  // ref를 통해서 입력된 값을 받아옴(특정 DOM을 선택할 때 사용)
  const amountInputRef = useRef();

  const submitHandler = (event) => {
    event.preventDefault();
    const enteredAmount = amountInputRef.current.value; // string
    // const enteredAmountNumber = Number(enteredAmount); // number
    const enteredAmountNumber = +enteredAmount; // number (숫자열로 변경)

    // console.log(typeof enteredAmountNumber);
    // 수량을 onAddToCart의 인자값으로 받아 Mealitem에 넘겨줌
    props.onAddToCart(enteredAmountNumber);
    
    /*
    // 유효성 검사
    // 공백이 있는가
    if (enteredAmount.trim().length === 0 || enteredAmount < 1 || enteredAmount > 5) {
      return;
    }
    */
  };

  return (
    <form className={classes.form} onSubmit={submitHandler}>
      <Input
        label="Amount"
        propsRef={amountInputRef} // props
        input={{
          id: "amount_" + props.id,
          type: "number",
          min: "1",
          max: "5",
          defaultValue: "1",
          step: "1",
        }}
      />

      {/* <input
        type="number"
        min="1"
        max="5"
        defaultValue="1"
        step="1"
        id={props.id}
      /> */}
      <button>+ Add</button>
    </form>
  );
};

export default MealItemForm;

• components 폴더 내 Cart 폴더
  Cart.jsx

//모달팝업 안에 들어갈 내용
import React, { useContext } from "react";
import Modal from "../UI/Modal";
import classes from "./Cart.module.css";
import CartContext from "../../store/cart-context";

const Cart = (props) => {
  const cartCtx = useContext(CartContext);
  const hasItems = cartCtx.items.length > 0; // 장바구니에 항목이 있을 경우
  const totalAmount = `$ ${cartCtx.totalAmount.toFixed(2)}`;

  const cartItemRemoveHandler = (id) => {
    cartCtx.removeItem(id);
  };
  const cartItemAddHandler = (item) => {
    cartCtx.addItem({...item, amount: 1});
  };
  
  // 계속 변화하는 값
  const cartItem = (
    <ul className={classes["cart-items"]}>
      {/* li를 map으로 돌림 */}
      {cartCtx.items.map((item) => (
        <li key={item.id}>
          <div>
            <h2>{item.name}</h2>
            <div>
              <span className={classes.price}>{`$${item.price.toFixed(2)}`}</span>
              <span className={classes.amount}>x {item.amount}</span>
            </div>
          </div>
          <div className={classes.btns}>
            <button onClick={() => cartItemRemoveHandler(item.id)}>-</button>
            <button onClick={() => cartItemAddHandler(item)}>+</button>
          </div>
        </li>
      ))}
    </ul>
  );

  return (
    // 모달 안에 모든 내용을 집어넣음
    <Modal onClose={props.onClose}>
      <div>
        {cartItem}
        <div className={classes.total}>
          <span>Total Amount</span>
          <span>{totalAmount}</span>
        </div>
        <div className={classes.action}>
          <button className={classes["button-outline"]} onClick={props.onClose}>
            Close
          </button>
          {/* hasItems가 true일 때만 Order버튼이 보이게 */}
          {hasItems && <button className={classes.button}>Order</button>}
        </div>
      </div>
    </Modal>
  );
};

export default Cart;

CartIcon.jsx

import React from 'react'

const CartIcon = () => {
  return (
    <svg fill="#fff" viewBox="0 0 576 512" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg"><path d="M463.1 416c-26.51 0-47.1 21.49-47.1 48s21.49 48 47.1 48s47.1-21.49 47.1-48S490.5 416 463.1 416zM175.1 416c-26.51 0-47.1 21.49-47.1 48S149.5 512 175.1 512s47.1-21.49 47.1-48S202.5 416 175.1 416zM569.5 44.73c-6.109-8.094-15.42-12.73-25.56-12.73H121.1L119.6 19.51C117.4 8.19 107.5 0 96 0H23.1C10.75 0 0 10.75 0 23.1S10.75 48 23.1 48h52.14l60.28 316.5C138.6 375.8 148.5 384 160 384H488c13.25 0 24-10.75 24-23.1C512 346.7 501.3 336 488 336H179.9L170.7 288h318.4c14.29 0 26.84-9.47 30.77-23.21l54.86-191.1C577.5 63.05 575.6 52.83 569.5 44.73z"/></svg>
  )
}

export default CartIcon

• store 폴더
  cart-context.js

import React from "react";

// 컨텍스트를 만듦, 컨텍스트 안에 데이타가 있음 (초기화)
const CartContext = React.createContext({
  items: [], // 아이템이 들어있는 배열
  totalAmount: 0, // 총 금액
  addItem: (item) => {},
  removeItem: (id) => {},
});
// 장바구니 항목 초기값

export default CartContext;

cartProvider.jsx

import React, { useReducer } from "react";
import CartContext from "./cart-context";
// CartContext = cart-context.js 안의 4가지 데이터 (초기화)

// reducer 함수 정의
const cartReducer = (state, action) => {
  if (action.type === "ADD") {
    const updatedTotalAmount =
      state.totalAmount + action.item.price * action.item.amount;
    // 기존의 totalAmount + 내가 가져온 item의 가격 * 내가 보낸 아이템의

    // * 검사
    // state.item - 기존 배열 / Array.findIndex() - 제일 먼저 나오는 조건에 맞는 아이템의 인덱스(순서) 반환
    // item의 id와 액션으로 찾아온 item의 id
    const existingCartItemIndex = state.items.findIndex(
      (item) => item.id === action.item.id
    ); // 숫자만 리턴
    const existingCartItem = state.items[existingCartItemIndex]; // item 자체를 리턴
    // 기존에
    // console.log("기존에 동일한 아이템이 있는가? : ", existingCartItem);

    let updatedItems;
    // 추가한 아이템이 기존에 있는 아이템일 경우
    if (existingCartItem) {
      const updatedItem = {
        ...existingCartItem,
        amount: existingCartItem.amount + action.item.amount,
      };
      updatedItems = [...state.items]; // 기존의 객체를 새 배열로
      updatedItems[existingCartItemIndex] = updatedItem; // 값을 더해준 기존 아이템 업데이트
    } else {
      // 추가한 아이템이 기존에 없는 아이템일 경우
      updatedItems = state.items.concat(action.item);
    }

    return {
      items: updatedItems,
      totalAmount: updatedTotalAmount,
    };
  }
  if (action.type === "REMOVE") {
    const existingCartItemIndex = state.items.findIndex(
      (item) => item.id === action.id
    );
    const existingCartItem = state.items[existingCartItemIndex]; //기존아이템이 없을 경우는 undefined

    // console.log("기존에 동일한 아이템이 있는가? : ", existingCartItem);

    const updatedTotalAmount = state.totalAmount - existingCartItem.price;

    let updatedItems;
    // 추가한 아이템이 기존에 있는 아이템일 경우
    if (existingCartItem.amount === 1) {
      // 1인 상태에서 빼주면 완전히 사라져야 함
      updatedItems = state.items.filter((item) => item.id !== action.id);
    } else {
      const updatedItem = {
        ...existingCartItem,
        amount: existingCartItem.amount - 1,
      };
      updatedItems = [...state.items]; // 기존의 객체를 새 배열로
      updatedItems[existingCartItemIndex] = updatedItem; // 값을 더해준 기존 아이템 업데이트
    }
    return {
      items: updatedItems,
      totalAmount: updatedTotalAmount,
    };
  }

  // switch (action.type) {
  //   case "ADD":
  //     return {
  //       items: state.items.concat(action.item), // ?
  //       totalAmount: state.items.totalAmount + action.item.price * action.item.amount, // ?
  //     }
  // }
  // return defaultCartState;
};

// reducer 초기화 정의
const defaultCartState = {
  // 아래 두 개의 상태 관리(addItemToCartHandler로 상태관리)
  items: [], // 아이템이 들어있는 배열
  totalAmount: 0, // 총 금액
};

// 2
const CartProvider = (props) => {
  // useReducer 호출(선언)
  // dispatchCartAction은 cartReducer 함수에 action으로 보내는 역할을 함
  const [cartState, dispatchCartAction] = useReducer(
    cartReducer,
    defaultCartState
  );

  // 2-1
  const addItemToCartHandler = (item) => {
    // dispatchCartAction으로 요소들을 객체 형식으로 보냄 (타입과 현재 아이템)
    // dispatchCartAction은 cartReducer 함수에 action으로 보내는 역할을 함
    dispatchCartAction({ type: "ADD", item: item });
  };
  const removeItemFromCartHandler = (id) => {
    dispatchCartAction({ type: "REMOVE", id: id });
  };

  // 1
  // 업데이트 될 객체 - 다이나믹하게 변하는 부분(게속 변하는 부분)
  // items, totalAmount 두 개를 저장하는 것이 목적임. 나머지는 함수 정의
  const cartContext = {
    items: cartState.items, // 아이템이 들어있는 배열
    totalAmount: cartState.totalAmount, // 총 갯수
    addItem: addItemToCartHandler,
    removeItem: removeItemFromCartHandler,
  };

  return (
    // 1-1
    <CartContext.Provider value={cartContext}>
      {props.children}
    </CartContext.Provider>
  );
};

export default CartProvider;

출력

• firebase에 저장되어 있는 내용 출력
  

• 페이지 URL

• 이미지로 대체
  
  
  
  

---