차근차근 배움터

장바구니에서 같은 항목들을 하나로 합치고 수량을 올리는 과정을 작성함 findIndex() 메서드 사용 CartProvider.js import CartContext from './cart-context'; import { useReducer } from 'react'; const defaultCartState = { items: [], totalAmount: 0 } const cartReducer = (state, action) => { if (action.type === 'ADD') { const exisitingCartItemIndex = state.items.findIndex(item => item.id === action.item.id); const exisitingCartItem = state..

bind 함수를 기억하는 가? => 놉 한 번도 안 배운 것 같은데 설명했다고 하시네 ㅋㅋ (기억력이...) Cart.js import React, { useContext } from 'react'; import styles from './Cart.module.css'; import Modal from '../UI/Modal'; import CartContext from '../../store/cart-context'; import CartItem from './CartItem'; const Cart = props => { const cartCtx = useContext(CartContext); const totalAmount = `$${cartCtx.totalAmount.toFixed(2)}`; con..

Ref 복습을 하자면 이번 화면에서는 주문하고자 하는 양을 입력하면 submit 즉 버튼을 클릭해서 form을 제출했을 때 iput 태그에 입력된 값을 가져오는 것이다. 이때 ref를 이용할 수 있는데 MealItemForm.js 에 들어간다 import { useRef } from 'react'; 값을 받아오려는 컴포넌트인 Input.js에 가서 아래와 같이 React.forwardRef() 를 이용해 감싸준다 import styles from './Input.module.css'; import React from 'react'; const Input = React.forwardRef((props, ref) => { return {props.label} }); export default Input; 이..

HeadCartButton.js 여깃 발생한 에러 cartCtx.items가 존재하지 않아서 item으로 바꿨다 const numberOfCartItems = cartCtx.item.reduce((curNo, item) => { return curNo + item.amount; }, 0); 발견, CartProvider의 items의 's'가 빠져 있었다

reduce() 메서드를 사용해서 배열 내 중복된 항목을 제거하고 난 개수를 알려준다 두 가지의 인수를 받는 데, 첫번째는 함수 두 번째는 값이다. 질문 CartProvider와 CartContext를 언제 다르게 사용해야 하는 지 차이를 모르겠다. HeaderCartButton.js import { useContext } from 'react'; import CartIcon from './CartIcon'; import CartContext from '../../store/cart-context'; import classes from './HeaderCartButton.module.css'; const HeaderCartButton = props => { const cartCtx = useContext..

전체 장바구니 데이터를 모든 컴포넌트에서 사용하고 싶다 전체 state를 관리하는 폴더의 이름은 store라고 보통 이름 짓는다 store 폴더 내에 cart-context.js 파일을 생성한다 import React from 'react'; const CartContext = React.createContext({ items: [], totalAmount: 0, addItem: (item) => {}, removeItem: (id) => {}, }); export default CartContext; 이제 이 state를 관리하기 위해서 useState나 useReducer를 사용해야 할 것이다 CartProvider.js 파일 생성 이 컴포넌트의 목표는 CartContext 데이터를 관리하고, 그 컨..

장바구니를 클릭하면 리스트 Modal 창이 뜨고 close 버튼이나 모달 바깥 창을 클릭했을 때 꺼지도록 코드를 작성했다. 중간에 왜 모달 창이 안 뜨나 했더니 Cart.js에서 map()를 사용할 때 key 값을 입력해주지 않아서 발생한 오류였다 Modal.js import { Fragment } from 'react'; import ReactDOM from 'react-dom'; import classes from './Modal.module.css'; const Backdrop = props => { return }; const ModalOverlay = props => { return {props.children} }; const portalElement = document.getElementBy..

import ReactDOM from 'react-dom'; Modal.js 에 아래와 같이 Portal을 사용하지 않아도 된다 const Modal = props => { return {props.children} }; 하지만 사용해보겠다 Portal을 사용하기 위해서는 react-dom 에서 ReactDOM을 import 해야 함 import ReactDOM from 'react-dom'; 무엇을 Portal 할 지와 어디로 Portal 할 지를 알려줘야 한다. id가 overlays인 div을요, index.html 파일에 헬퍼 상수를 만든다 Modal.js import { Fragment } from 'react'; import ReactDOM from 'react-dom'; import clas..

해당 강의에서는 장바구니 모달 창을 만들 것이다 React Portal을 이용해서 먼저 만들어보기 ! Cart.js import classes from './Cart.module.css'; const Cart = props => { const cartItems = ( {[ { id: 'c1', name: 'Sushi', amount: 2, price: 12.99 } ].map((item) => {item.name})} ) return {cartItems} Total Amount 30.33 } export default Cart;

양식 입력 IDs 수정하기 현재 MealItemForm의 적용은, 모든 MealItem 이 똑같은 id 받으며, 이전 강의에서 보여준 코드에서 다음을 수행합니다: 이 방식도 작동하지만 두 가지 주요 단점이 있습니다. 즉시 이해되지 않습니다. (따라서 불행히도 녹음 중에 미끄러졌습니다): 1. 어떤 레이블을 클릭하던 실제 MeatItem에 속한 것이 아니더라도 항상 동일한 첫 번째 입력 요소가 선택됩니다. 2. 스크린리더는 레이블 + 입력을 올바르게 연결할 수 없습니다(모든 레이블이 동일한 입력을 가리키기 때문에). 비디오에 표시된 모든 것은 표시된 대로 작동하며 이것을 수정하는 것은 선택 사항입니다, 하지만 이 문제를 수정하는 것은 쉽기 때문에 아래 조정을 고려할 수 있습니다. 한 가지 가능한 해결 방법..