왜 Nano Stores인가요?

• 종속성이 전혀 없는 최소한의 js를 제공하여 가볍다!
• 프레임워크에 구애받지 않아 프레임워크 간 상태 공유가 원활하다!
• array, map도 저장 가능함!

대안에 recoil도 redux도 justand도 없다. 어째서😂?!

주의사항

서버사이드에서 사용 가능하나 권장하지 않음

.astro나 수화되지 않은 컴포넌트는 재랜더링되지 않으므로, 구독이 불가능하기 때문!
-> nano stores는 클라이언트 변경 사항에 반응하도록 구축되었음을 잊지 말자!

설치

사용하는 모든 프레임워크에 대해 설치해야 함

npm install nanostores @nanostores/react

사용

store를 만들어 atom을 생성해주고, 해당 atom에 상태를 저장한다.
-> recoil이랑 비슷한 듯?

//src/counterStore.js

import { atom } from 'nanostores';

export const count = atom<number>(0); //초기값


//src/components/Counter.jsx
import { useStore } from '@nanostores/react';
import { count } from '../cartStore';

export default function CartButton() {
  
  const nowCount = useStore(count);
  const setCount = (nextCount) =>{ count.set(nextCount) }

  return (
    <>
    <button onClick={() => setCount(nowCount+1) }>+</button>
	<span>{nowCount}</span>
	<button onClick={() => setCount(nowCount-1) }>-</button>
	</>
  )
}

maps 사용

import { atom, map } from 'nanostores';

export const cartItems = map({});

export const addCartItem = ({ id, name, imageSrc }) => {
  const existingEntry = cartItems.get()[id];
  
  //있으면 양을 1개 늘리고 없으면 추가
  if (existingEntry) 
    cartItems.setKey(id, {
      ...existingEntry,
      quantity: existingEntry.quantity + 1,
    })
  else 
    cartItems.setKey(id,
      { id, name, imageSrc, quantity: 1 }
    );
  
}