localstorage

[망고미]

안녕하세요 로컬스토리지에 장바구니 담은 것을 구현하려고하는데 두가지 궁금한점이 있습니다.
<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: [
//////////// 첫번째 궁금한점 : 강조표시한 곳이 디폴트 값인게 싫어서 장바구니를 비운다는 의미에서 삭제하여 실행하면 localstorage에 값들이 쌓이지않습니다.
즉 localstorage에 [{"id":0,"name":"White and Black","price":"120000","count":2}]값이 추가되고 또 다른 상품을 넣으면 저 값은 없어집니다.
하지만 아래의 강조 표시한 곳 코드를 추가한다면 [{"id":0,"name":"White and Black","price":"120000","count":2},{"id":2,"name":"Grey Yordan","price":"130000","count":1},{"id":1,"name":"Red Knit","price":110000,"count":1}]이렇게 localstorage에
추가되지만,,, 재실행(npm start)를 하면 강조된 값만 storage에 남습니다. 사이트를 구성할때 { } 안에있는값은 없어야지 고객들이 원하는 상품을 담을 수 있다고 생각하는데,,
어떤부분이 문제인지 궁금합니다.
    {
      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,
  },
});

<app.js>

////두번째 궁금한점 : 초기화 되는 이유를 질문남겼을때 애플선생님께서는 
localStorage.setItem("cart ", JSON.stringify([]));
App컴포넌트에 이거 자꾸 실행되어서 초기화되나봅니다 원할때 실행하지말라고 합시다
라는 답변을 주셨는데 조금 더 구체적으로 설명해주실 수 있으실까요? 항상 감사합니다.

  useEffect(() => {
    if (null) window.localStorage.setItem("cart", JSON.stringify([]));
  }, []);

[codingapple]

1은 그냥 초기값은 []로 비워두면 됩니다 
2는 로컬스토리지에 이미 뭐가 있으면 localStorage.setItem("cart", JSON.stringify([])) 하지말라고 코드짜면 될거같은데요

[망고미]

로컬스토리지에 이미 뭐가 있으면 localStorage.setItem("cart", JSON.stringify([])) localStorage를 초기화하지말라고 이해했는데,,
혹시 강의에서 다룬 내용인가요?! 어떤 부분을 참고하면 if문을 써서 초기화 되는것을 막을 수 있을까요...

몇일째 이문제가 안풀려서 고민하고,, 다른 강의 먼저 듣고있는데.. localstorage관련한 강의 들어도 array 밖에 없어서요..
조금 더 구체적으로 설명 부탁드려도될까요? 

제가하고싶은건 detail페이지에서 상품을 클릭하면 해당 상품이 장바구니에 추가되고 localstorage에 추가되는 것을 구현하고싶습니다.
그럼 detail페이지에서 상품이 클릭했을때 뭔가 반응이 일어나야할거같은데 이부분도 설명부탁드리겠습니다..

[codingapple]

알아서 코드짜보는 부분입니다 if (localStorage.getItem("cart")){ localStorage.setItem("cart", JSON.stringify([])) } 해봅시다 
장바구니추가버튼누르면 addItem() 함수 만들어놓은거 dispatch하면 될듯요

[망고미]

바로바로 초기화되는됩니다.. 강의를 처음부터 다시 듣는게 나을까요...?

app.js

  useEffect(() => {
    if (localStorage.getItem("cart")) {
      localStorage.setItem("cart", JSON.stringify([]));
    }
  });

detail.js

          <button
            className="btn btn-danger"
            onClick={() => {
              dispatch(
                addItem({
                  id: findproduct.id,
                  name: findproduct.title,
                  price: findproduct.price,
                  count: count + 1,
                })
              );
            }}
          >
            주문하기
          </button>

[codingapple]

무엇을하면 초기화됩니까

[글쓴이]

글