나는 이때까지 map을 사용해서 리스트를 랜더링 할 때 보통 데이터에 이미 고유한 ID가 있다면 그 ID를 사용하지만 없는 경우에는 index를 넣는 경우가 있었는데이는 권장하지 않는 방법이라고 한다.   key에 index 값을 넣지 않는 것이 권장되는 이유는 리스트 항목의 순서나 내용이 변경될 때 예상치 못한 렌더링 문제를 일으킬 수 있기 때문이다.1. 항목 순서 변경 시 문제리스트 항목의 순서가 바뀌면, index 값은 그대로 유지되기 때문에 리액트는 항목 자체가 변경되었음을 인식하지 못한다. 이는 결과적으로 불필요하거나 잘못된 렌더링을 유발할 수 있다. 예를 들어, 항목이 삽입되거나 삭제될 때, 각 항목의 key가 여전히 같은 index 값을 가지면 리액트는 항목이 그대로 있다고 잘못 판단할 수 ..

홈페이지 검색창에 검색어를 입력 후 검색 버튼을 클릭할 경우 ProductList페이지로 이동하여 검색 결과를 출력하도록 함 Navbar.jsx useState 로 search를 추가한다. 검색창(input)의 내용이 변경될 때마다 setSearch로 검색어를 저장한다. 그리고 onSubmit 이벤트로 검색 버튼을 클릭할 경우 handleSubmit을 실행하여 검색어가 공백이 아닐 경우에만 navigate를 사용해 products로 이동한다. 파라미터로는 search= 검색어에 공백을 제거해서 보낸다. const Navbar = ({ user, cartCount }) => { const [search, setSearch] = useState(""); //검색어 const navigate = useNavi..

대표 상품을 가져오기 위한 주소는 아래와 같다. [GET] 대표 상품 가져오기 - http://localhost:5000/api/products/featured 그리고 주요 제품은 3개가 들어있다. 현재는 위와 같이 주요 제품들이 표시 되는데 useData를 사용해서 백엔드에서 주요 제품을 받아온 다음에 ProductCard로 넘겨주면 되겠다. import useData from "../../Hook/useData"; import ProductCard from "../Products/ProductCard"; import ProductCardSkeleton from "../Products/ProductCardSkeleton"; import "./FeaturedProducts.css"; const Featu..

이미 로그인 되어있는 유저의 경우 login 및 signup페이지 이동 시 홈페이지로 이동한다. import React, { useContext } from "react"; import { Navigate, Route, Routes } from "react-router-dom"; import HomePage from "../Home/HomePage"; import ProductsPage from "../Products/ProductsPage"; import SingleProductPage from "../SingleProduct/SingleProductPage"; import SignupPage from "../Authentication/SignupPage"; import LoginPage from "...

orderService.js를 생성한다. 그리고 App.jsx에서 cart 프로바이더에 setCart를 추가한다. setCart는 장바구니에 담는 함수 CartPage.jsx에서 setCart를 가져온다. const CartPage = () => { const [subTotal, setSubTotal] = useState(0); //배송비 제외 합계 const user = useContext(UserContext); const { cart, removeFromCart, updateCart, setCart } = useContext(CartContext); 그리고 결제하기를 클릭하면 실행될 checkout함수를 추가한다. //주문하기 const checkout = () => { const oldCart =..

ProductCard.jsx에 useContext를 사용해서 userContext를 가져온다. userContext에는 현재 로그인 중인 유저의 정보가 담겨있고 const ProductCard = ({ product }) => { const { addToCart } = useContext(CartContext); const user = useContext(UserContext); 장바구니 버튼에 조건을 추가하여 유저가 있을 경우에만 노출하게 한다. {/* 재고가 있을 경우 및 유저가 있을 경우에만 장바구니 담기 표시 */} {product?.stock > 0 && user && ( addToCart(product, 1)} > )} 1. 유저 없을 경우 2. 유저 있을 경우 마찬가지로 SingleProdu..

ProductsList.jsx를 {/* products가 있을 경우 반복문으로 출력 */} {data.products && data.products.map((product) => ( ))} 아래와 같이 수정한다. {/* products가 있을 경우 반복문으로 출력 */} {data.products && data.products.map((product) => ( ))} ProductCard.jsx에서는 const ProductCard = ({ product }) => { 로 수정하고 아래의 출력할 데이터들의 앞에 . product?.를 붙여서 수정한다. import "./ProductCard.css"; import star from "../../assets/white-star.png"; import bas..

App.jsx에 장바구니 개수 증감 할 함수를 추가한다 // 장바구니 상품 개수 증감( type : 감소,증가 ) const updateCart = (type, id) => { const updatedCart = [...cart]; const productIndex = updatedCart.findIndex( //findIndex:update 할 제품의 id의 idnex를 찾는다. (item) => item.product._id === id ); //만약 타입이 increase 이면 기존의 수량에서 증가한다. if (type === "increase") { updatedCart[productIndex].quantity += 1; setCart(updatedCart); } //만약 타입이 decrease ..

App.jsx 에 장바구니의 상품을 삭제하는 함수를 추가한다. //장바구니 상품 삭제 const removeFromCart = (id) => { const oldCart = [...cart]; //기존의 장바구니 const newCart = oldCart.filter((item) => item.product._id !== id); //매개변수로 받아오는 id와 같지 않은 것만 newCart에 담는다 setCart(newCart); //장바구니에 저장한다. }; 그리고 Cart 프로바이더에 removeFromCart함수를 전달한다. CartPage.jsx에 가서 useContext에 위의 함수를 추가하고 const { cart, removeFromCart } = useContext(CartContext);..

유저 데이터의 경우에는 이곳 저곳에서 사용이 많이 될 것으로 컨텍스트로 만들어서 관리하면 사용하기 쉽다. import { createContext } from "react"; const UserContext = createContext(null); export default UserContext; App.jsx에서 유저 컨텍스트를 가져온다. // user context import UserContext from "./contexts/UserContext"; return ( ); CartPage.jsx로 이동해서 useContext로 user 객체를 받는다. 그래서 src 에 백엔드 프로필 주로를 직접 입력하는데, user가 있을 경우에 프로필을 출력하게한다. import { useEffect, useSt..