지영이의 개발 블로그

DB 없이 state 데이터를 저장 하고 싶으면 서버로 보내서 DB에 저장 브라우저 임시 저장공간 사용 (localStrorage) 저는 localStorage를 사용해 데이터를 저장하여 최근 본 상품 UI를 만들어 볼것입니다 let [watchItem, setWatch] = useState([]); useEffect(() => { let watch = localStorage.getItem("watched"); if (watch == null) { watch = []; } else { watch = JSON.parse(watch); watch.push(id); } if (watch.length >= 3) { watch = new Set(watch); watch = [...watch]; } localSto..

버튼을 3번 클릭하면 "상품이 더 없습니다" 라는 alert 창을 보여주도록 코드를 작성하였는데 여기서 문제가 발생했다 버튼을 3번 클릭하고 input에 값을 입력할때마다 alert창이 띄워지는것,,, 문제의 원인은 버튼의 값을 usestate에 저장해주었기 때문에 클릭을 3번한 값이 계속 저장이 되어있는 상태이기 때문이다 이를 해결하기 위해서 내가 생각해본 방법은 버튼을 3번클릭하면 버튼의 값을 변경해 state값을 변경해주는것!! function BtClick(props) { useEffect(() => { props.버튼변경(false); }, [버튼 == 3]); useEffect(() => { if (props.버튼 == 1) { axios .get("https://codingapple1.git..

하나의 장바구니 상태를 여러 컴포넌트에 걸쳐 연동시키고 싶으나 계속되는 상태 및 함수의 props 전달로 인해 복잡해지는 문제가 발생한다.이때 리덕스를 도입하면 위 문제를 깔끔히 해결할 수 있다. 1.리덕스를 사용해서 장바구니 보여주기 { dispatch( addItem({ id: props.items[id].id, name: props.items[id].title, price: props.items[id].price, count: 1, }) ) : dispatch(addCount(props.items[id].id)); 주문하기 import { configureStore, createSlice } from "@reduxjs/toolkit"; let cart = createSlice({ name: "car..

useNavigate() 파라미터 전달, useLocation() 파라미터 수신 방법 상품아이템 클릭시 해당하는 detail 페이지로 이동 1. 페이지 이동시, 파라미터 전달 방법 1) useNavigate() 훅으로 navigate 함수를 취득한다. 2) navigate() 함수의 첫번째 인자에 이동할 경로, 두번째 인자의 state 속성에 파라미터를 넣어준다. - navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) 기존코드 { item.map((a,i)=>{ return }) } link to를 적용해 원하는 페이지로 이동하는 코드를 짜줌 변경코드 {item.map((a, i) => { return ( navigate(`/detail/${a.id}`, { st..

비동기 HTTP 통신을 위해 자주사용하는 라이브러리인 axios를 통해 필요한 데이터를 불러와 보겠습니다. import axios from 'axios' function App(){ let [shoes, setShoes] = useState(어쩌구); return ( { axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{ let copy = [...shoes, ...결과.data] setShoes(copy) }) .catch(()=>{ console.log('실패함') }) }}>버튼 ) } 🎶더보기 버튼 기능🎶 제가 구현해볼 기능은 버튼을 1번 클릭했을때 get요청을해서 https://codingapple1.github.io..

💛Navbar💛 Bootstrap 라이브러리를 사용해서 간편하게 navbar를 만들어줌 💛Carousel - slick slider💛 공식사이트 👉🏻 https://react-slick.neostack.com/ npm npm install react-slick --save yarn yarn add react-slick 이외에도 기본적인 slick-carousel 모듈도 설치를 해주어야합니다. npm install slick-carousel // Import css files import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import React from "react"; import "bootstr..