2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
안녕하세요 npm start를 해서 다시 접속하면 localstorage에 저장은 되는데 화면에는 제가 기본으로 적용한 값이 출력되는데 다시 접속해도 화면에도 localstorage와 같은 값이 보이게 하려면 어떻게 해야하나요,..?! Home, Cart 이동시 localstorage가 초기화되지않지만 detail페이지 가는 순간 초기화 됩니다.
<<<<app.js>>>> import "./App.css"; import { Navbar, Container, Nav } from "react-bootstrap"; import { useEffect, useState } from "react"; import data from "./data.js"; import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom"; import Detail from "./routes/Detail.js"; import axios from "axios"; import Cart from "./routes/Cart.js"; import { useQuery } from "react-query"; function App() { /* let obj = { name: "kim" }; localStorage.setItem("data", JSON.stringify(obj)); let 꺼낸거 = localStorage.getItem("data"); console.log(JSON.parse(꺼낸거).name); */ useEffect(() => { localStorage.setItem("watched", JSON.stringify([])); }, []);//해당 storage가 비워져있으면 데이터를 저장한다?! 이 코드가 맞나요? ㅠㅠㅠㅠ,,, 결과는 잘나오는거 같습니다. useEffect(() => { if (null) window.localStorage.setItem("cart", JSON.stringify([])); }, []); let [shoes, setShoes] = useState(data); let navigate = useNavigate(); /*페이지 이동하는데 도와주는 useNavigate()*/ let [count, setCount] = useState(2); // react-query 이용해서 ajax요청하기 // useQuery('작명',()=> axios.get('url').then((a)=> return{a.data})); // useQuery사용하면 장점 // 1. 성공/실패/로딩 중 쉽게 파악가능 // 2. 틈만 나면 자동으로 refetch해줌 // 3. 장점 실패시 retry 알아서 해줌 // 4. state 공유 안해도된다. // 5. ajax 결과 캐싱기능 let result = useQuery( "username", () => axios.get("https://codingapple1.github.io/userdata.json").then((a) => { console.log("요청됨"); return a.data; }), { staleTime: 2000 } //타이머 기능도 가능 ); let [ct, setCt] = useState(0); let [age, setAge] = useState(20); useEffect(() => { if (ct != 0 && ct < 3) { setAge(age + 1); console.log(ct); } }, [ct]); return ( <div className="App"> {/** <div> <div>안녕하십니까 전 {age}</div> <button onClick={() => { setCt(ct + 1); }} > 누르면 한살먹기 </button> </div>*/} <Navbar bg="dark" variant="dark"> <Container> <Navbar.Brand href="#home">ShoesShop</Navbar.Brand> <Nav className="me-auto"> <Nav.Link onClick={() => { navigate("/"); }} > Home </Nav.Link> <Nav.Link onClick={() => { navigate("/cart"); }} > Cart </Nav.Link> </Nav> <Nav className="ms-auto"> {result.isLoading && "로딩중"} {result.error && "에러남"} {result.data && result.data.name} </Nav> </Container> </Navbar> <Routes> {/*메인페이지임 */} <Route path="/" element={ <> <div className="main-bg"></div> <div className="container"> <div className="row"> {shoes.map(function (a, i) { return ( <Product shoes={shoes} i={i} key={shoes[i].title} ></Product> ); })} </div> </div> {count <= 3 ? ( <button onClick={() => { setCount(count + 1); axios .get( "https://codingapple1.github.io/shop/data" + count + ".json" ) .then((result) => { let copy = [...shoes, ...result.data]; setShoes(copy).catch(() => { console.log("실패함"); }); }); }} > 버튼 </button> ) : ( "" )} </> } ></Route>{" "} <Route path="/detail/:id" element={<Detail shoes={shoes}></Detail>} /> <Route path="/about" element={<About></About>}> <Route path="member" element={<div>멤버임</div>} /> <Route path="location" element={<div>위치임</div>} /> </Route> <Route path="/event" element={<Event></Event>}> <Route path="one" element={<div>첫 주문시 양배추즙 서비스</div>} /> <Route path="two" element={<div>생일기념 쿠폰받기</div>} /> </Route> <Route path="/cart" element={<Cart />}></Route> {/*404페이지 */} <Route path="*" element={<div>없는 페이지입니다</div>}></Route> </Routes> </div> ); } function Event() { return ( <div> <h4>오늘의이벤트</h4> <Outlet></Outlet> </div> ); } function About() { return ( <div> <h4>회사정보임</h4> <Outlet></Outlet> </div> ); } function Product(props) { return ( <div className="col-md-4"> <img src={ "https://codingapple1.github.io/shop/shoes" + (props.i + 1) + ".jpg" } width="80%" /> <h4>{props.shoes[props.i].title}</h4> <p>{props.shoes[props.i].price}</p> </div> ); } export default App;<<<store.js>>>
import { createSlice, configureStore } from "@reduxjs/toolkit"; import user from "./store/userSlice.js"; // state 변경함수들 남음 // {} 안에는 변경 함수명 넣기 let stock = createSlice({ name: "stock", initialState: [10, 11, 12] }); let cartproduct = createSlice({ name: "cartproduct", initialState: [ { id: 0, name: "White and Black", price: "120000", count: 2, }, { id: 2, name: "Grey Yordan", price: "130000", count: 1, }, ], reducers: { addCount(state, action) { // array자료에서 내가 원하는 항목만 찾고싶다? state.findIndex // findIndex는 array 뒤에만 붙일 수 있다. let number = state.findIndex((a) => a.id === action.payload); state[number].count++; localStorage.setItem("cart", JSON.stringify([state])); }, reduceCount(state, action) { let number = state.findIndex((a) => a.id === action.payload); state[number].count--; localStorage.setItem("cart", JSON.stringify([state])); }, addItem(state, action) { const index = state.findIndex((e) => e.id === action.payload.id); if (index > -1) { state[index].count++; localStorage.setItem("cart", JSON.stringify(state)); } else { state.push(action.payload); localStorage.setItem("cart", JSON.stringify(state)); } }, deleteItem(state, action) { let item = state.filter((a) => a.id !== action.payload); return item; }, }, }); export let { addCount, reduceCount, addItem, deleteItem } = cartproduct.actions; export default configureStore({ reducer: { user: user.reducer, stock: stock.reducer, cartproduct: cartproduct.reducer, }, });
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.