react

React : 상품을 장바구니에 추가하기 (immer, redux, action, payload)

조건 상세페이지에서 버튼을 누르면 장바구니페이지에 해당 상품이 업데이트된다. 풀이 store.js import { createSlice } from '@reduxjs/toolkit' let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 1, name : 'Red Knit', count : 1} ] , reducers : { ... addCart(state, action){ const newCart = action.payload; return [...state, newCart]; } } }) export let { changeName, changeCount, add..

React : 에서 자주 쓰는 if문 패턴 5가지 (if, 삼항연산자, &&, switch, object)

1. 컴포넌트 안에서 쓰는 if/else 컴포넌트에서 JSX를 조건부로 보여주고 싶을 때 사용한다. if문은 return()안의 JSX내에서는 사용이 불가능하므로 보통 아래처럼 return+JSX를 뱉는 if문을 작성해 사용한다. function Component() { if ( true ) { return 참일시 노출될 HTML; } else { return null; } } else 생략하는 법 return을 만나면 코드가 종료되므로 이렇게 축약 가능하다. function Component() { if ( true ) { return 참일시 노출될 HTML; } return null; } 2. JSX 안에서 쓰는 삼항연산자(ternary operator) jsx 내(return 내)에서 쓸 수 있다...

React : 장바구니 제품 수량변경 (map, redux, action, payload)

조건 map으로 data를 불러온 장바구니 테이블에서 수량변경 버튼을 누르면, array에서 누른 버튼 옆에 있는 상품과 id값이 같은 상품을 찾아서 count값을 1 플러스 연산한다. 풀이 component.js { state.cart.map((a, i)=> { state.cart[i].id } { state.cart[i].name } { state.cart[i].count } { dispatch(changeCount(state.cart[i].id)) }}>➕ ) } store.js let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Gre..

React : state 공유하는 "Redux" (state 변경함수/파라미터/함수분리)

state 변경하는 법 useState()와는 다른 방식을 써야 한다. state를 수정해주는 함수를 만들고, 그 함수를 실행해야 할 때 store.js에 요청해야 한다. store.js에서 state 변경함수 만들기 let user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(){ // state 값 변경함수 1 return 'Park' }, changeFullname(){ // state 값 변경함수 2 return 'Kim Noran' } } }) export let { changeName, changeFullname } = user.actions // 함수 export store.js에 변경함수를 만든다...

React : state 공유하는 "Redux" (state 보관/사용)

store에 state 보관하는 법 import { configureStore, createSlice } from '@reduxjs/toolkit' let 작명 = createSlice({ name : 'state 이름', initialState : 'state 값' }) let user = createSlice({ name : 'user', initialState : 'kim' }) let stock = createSlice({ name : 'stock', initialState : [10,11,12] }) export default configureStore({ reducer: { 작명 : createSlice만든거.reducer, user : user.reducer, stock : stock.red..

React : state 공유하는 "Redux" (설치)

컴포넌트간에 state 전송 없이도 Redux를 사용하면 state를 공유할 수 있다. js파일을 하나 만들어서 state를 몰아넣는 식이다. Redux 설치 전 확인사항 { ... "react": "^18.2.0", "react-dom": "^18.2.0", ... } package.json 파일에서 reat/react-dom 버전이 18.1버전 이상인지 확인하자. 설치하는 법 터미널 설치 npm install @reduxjs/toolkit react-redux store.js 파일생성 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) src폴더에 store.js 파일을 생성해 ..