감자튀김 공장🍟

코드를 짜다가 이런 오류가 떴다. 먼저 finalRes를 살펴보자면 finalRes = { "0": { // 객체 배열 index 값 "Id": 1, // Menu DB에 저장되어 있는 제품 Id "Name": "Hot Latte", "Price": 3700, "Quantity": 2, }, "1": { "Id": 14, "Name": "Lemon Ade", "Price": 3800, "Quantity": 5, }, } 이런 식으로 json 객체가 finalRes를 이루고 있다. 배열은 map()으로 출력이 되지만 객체는 map()으로 출력이 되지 않아 TypeError: Cannot convert object to primitive value 라는 오류가 뜬 것이다. 다른 블로그에서는 JSON.stri..

Cart.js에서 넘겨준 장바구니 제품 리스트와 sum 값을 받아서 최종 수량 변경과 가격 설정을 해야한다. Cart.js에서는 제품 페이지에서 추가하는 제품들이 그대로 저장된다. 같은 물품을 두 번 담으면 Cart.js 화면에는 두 번 제품 이름이 출력된다. 이를 FinalCart.js 에서는 Object로 데이터들을 다루는데 같은 id 값이 있는 물품을 한 개로 줄이면서 Quantity 값을 +1 증가하고, 같은 제품의 수량 변경을 가능하게 한다. FinalCart.js import React from 'react'; import {useHistory, useLocation} from 'react-router-dom'; import {useSelector} from 'react-redux'; impo..

구글링을 해보니까 주로 태그를 많이 사용해서 state 값을 넘기던데, 나는 버튼으로 페이지를 넘기면서 데이터를 전해줘야 해서 많이 난감했다. 어떤 것을 써서 넘겨줘야 하는지 모르겠어서 React Korea 커뮤니티에 글을 남겼더니 친절하신 분이 댓글로 알려주셔서 기록해놓기 위해 달려왔다. 버튼을 누르면서 + 페이지 이동도 하고 + state 값도 넘기는 방법! 태그를 잘 사용하면 된다! Cart.js 먼저 state 값을 보내는 쪽의 코드를 보자. import React from 'react'; import {Link} from 'react-router-dom'; function Cart() { let sum = 0; // 여기서 sum 값에 값들을 더하는 함수들이 있다. return ( 금 액 : {..

먼저 나는 를 사용하여 state 값을 자식 컴포넌트로 넘겨주는 것을 구현했다. 근데 막상 버튼을 눌러 페이지 링크가 이동되고 나니까 위와 같은 오류가 떴다. 다른 블로그를 찾아보니 React에서 {this.state} 상태 값을 출력, 사용할 때 뜨는 에러라고 한다. FinalCart.js 현재 내 코드는 아래와 같다. import React from 'react'; import {useLocation} from 'react-router-dom'; function FinalCart() { // sum에서 부모 컴포넌트가 넘겨준 state 값을 받아온다. const sum = useLocation(); // ... return ( 총 금액: {sum} ); } export default FinalCart..

Component의 기능 컴포넌트는 데이터가 주어졌을 때 이에 맞춰 UI를 만들어 주고 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다. 컴포넌트를 선언하는 두 가지 방식 컴포넌트를 선언하는 방법은 두가지가 있다. 1. 함수형 컴포넌트 App.js import React from 'react'; import './App.css'; function App() { const name = '리액트'; return {name} } export default App; 2. 클래스형 컴포넌트 App.js import React, {Component} from 'react'; class..

1. JSX는 뭘까? JSX는 JavaScript의 확장 문법이며 XML과 매우 비슷하다. JSX로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해 일반 JavaScript 형태의 코드로 변환된다. 2. 그럼 JSX도 JS일까? JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 3. JSX 문법 (1) - 감싸인 요소 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. src/App.js import React from 'react'; function App() { return ( 리액트 안녕! 과자 먹고 싶다. ) } export default App; 이런 형태의 코드는 오류가 뜬다. 요소 여러 개(, )가 부모..