find

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 : 가나다정렬되어도 끄떡없는 상세페이지 불러오기 (useParams, find())

가나다정렬되어도 끄떡없는 상세페이지 불러오기 조건 배열의 순서가 변경되기 전과 후가 같은 상품으로 이동되도록 만든다. 풀이 import { useParams } from "react-router-dom"; function Detail(props){ let {id} = useParams(); let selectedShoes = props.shoes.find(function(shoe){ return shoe.id === parseInt(id); }) return ( {selectedShoes.title} {selectedShoes.content} {selectedShoes.price} 주문하기 ) } export default Detail; find()를 사용하여 유저가 입력한 url파라미터와 상품 id가 ..

[드림코딩] 유용한 배열(array) api (1) : join, split, reverse, slice, find

join 배열의 모든 데이터를 string으로 합쳐 변환한다. const goodcoders = ['noran', 'paran', 'black', 'white']; const result = goodcoders.join(); console.log(result); //noran,paran,black,white 참고 아래처럼 구분자를 전달하면 전달된 구분자로 구분되어 나타난다. const result = goodcoders.join(|); console.log(result); //noran|paran|black|white split string 데이터를 배열로 만든다. const coders = 'noran,paran,black,white'; const result = coders.split(','); co..