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([]));
  }, []);