본문 바로가기
728x90
반응형

리액트59

[리액트] Redux 사용 (addItem / state.push ) 주문버튼누르면 state에 새로운 상품추가- addItem()detail 페이지에서 주문하기 버튼 누르면 cart.js 에 상품 하나 추가해보기. initialState: [ { id: 0, name: "White and Black", count: 2 }, { id: 2, name: "Grey Yordan", count: 1 }, { id: 1, name: "Red Knit", count: 1 }, // 추가해준 데이터. 이런 식으로 추가하기. ],이런 식으로 배열 데이터 하나 더 추가해주면 됨. addItem() 사용 state 수정함수 addItem() 사용해주기{ id: 1, name: "Red Knit", count: 1 }저 id 를 위에 있는 cart State 에 추가해달라.. 2024. 6. 10.
[리액트] Redux 사용 ( 파일 분할 / addCount / findIndex ) 파일분할let user = createSlice({ name: "user", initialState: { name: "kim", age: 20 }, reducers: { changeName(state) { state.name = "park"; }, increase(state, action) { state.age += action.payload; }, },});store.js 에 있는해당코드가 넘 길어서 따로 파일로 빼고싶을 때1. 따로 store 폴더 만든 다음 userSlice.js 파일 생성하고 import와 exportimport { createSlice } from "@reduxjs/toolkit";let user = createSlice({ nam.. 2024. 6. 10.
localStorage로 만드는 최근 본 상품 기능 1 보호되어 있는 글 입니다. 2024. 6. 8.
리액트에서 자주쓰는 if문 작성패턴 5개 보호되어 있는 글 입니다. 2024. 6. 8.
Redux 5 : 장바구니 기능 만들기 숙제 & 응용문제 보호되어 있는 글 입니다. 2024. 6. 8.
Redux 4 : state가 object/array일 경우 변경하는 법 보호되어 있는 글 입니다. 2024. 6. 7.
[리액트] Redux 사용 (배열 state 데이터 바인딩, 변경 / increase() / 다수 state) object인 state의 데이터 바인딩object 자료 만들어주기let user = createSlice({ name: "user", initialState: "kim", reducers: { changeName(state) { return "john " + state; }, },});여기서 "kim" 을 object 자료로 변경, age도 추가let user = createSlice({ name: "user", initialState: { name: "kim", age: 20 }, reducers: { changeName(state) { return "john " + state; }, },});object 자료 데이터 바인딩{state.user}의.. 2024. 6. 7.
[리액트] Redux 사용 ( 데이터바인딩 / state 변경 ) state 데이터 바인딩cart State 추가import { configureStore, createSlice } from "@reduxjs/toolkit";let user = createSlice({ name: "user", initialState: "김씨",});let stock = createSlice({ name: "stock", initialState: [10, 11, 12],});//cart state 추가let cart = createSlice({ name: "cart", initialState: [ { id: 0, name: "White and Black", count: 2 }, { id: 2, name: "Grey Yordan", count: 1 }, ],});/.. 2024. 6. 7.
[리액트] Redux 설치와 사용 (state 보관 / 갖고 오기 / 추가 ) 장바구니 페이지만들기 {/* Redux - 장바구니 페이지 만들기 */} }>라우트 사용해서 장바구니 페이지 생성 가능.장바구니 안에 들어갈 내용은 속성 element 사용해서 적어줌 리액트 부트스트랩 사용해서 element 에 들어갈 html 생성 - 리액트 부트스트랩 import 필수import { Table } from "react-bootstrap";function Cart() { return ( # 상품명 수량 변경하기 1 안녕 .. 2024. 6. 6.
728x90
반응형