[리액트] 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 사용 (배열 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.
[리액트] 데이터 바인딩 차이 ( 변수 / 컴포넌트 )
변수 데이터 바인딩다른 js 파일에 있는 html 데이터 바인딩다른 파일로 빼서 변수에 담은 후, export let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000, }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000, }, { id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000, },];export default data;다른 파일 생성 후, array 배열 데이터를 변수..
2024. 6. 4.
