아스트로나노 매장 지도

이전 기사에서 우리는 먼저 Nano Stores과 이들이 프레임워크 간에 상태를 동기화할 수 있는 방법을 소개했습니다.

이 기사에서는 이러한 Nano Store에 대해 자세히 알아보고 특히 지도를 살펴보겠습니다.

맵은 키 값을 유지하려는 개체를 저장하는 데 사용할 수 있는 일종의 저장소입니다.
그런 다음 이 키를 사용하여 스토어의 기존 항목을 업데이트할 수 있습니다.

Nano 매장의 지도

예제를 만들어 봅시다. 지도가 어떻게 작동하고 무엇을 할 수 있는지 설명하는 데 도움이 됩니다.

따라 하려면 여기GitHub branch를 시작점으로 사용하십시오.

사용자가 기존 색상을 업데이트하고 새 색상을 추가할 수 있는 색상 목록을 만들고 싶습니다.

먼저 /store/colors.js라는 새 매장을 추가해 보겠습니다.

내부 지도 기능을 가져오기 시작합니다.

import { map } from 'nanostores';

그런 다음 초기 개체를 정의할 수 있습니다. 우리의 경우 이미 하나의 색상을 추가하고 싶습니다.

const colors = map({
  blue: {
    color: 'blue',
    hex: '#9bf6ff',
  },
});

보시다시피 이 특정 항목을 제어하는 ​​데 사용할 수 있는 키 식별자( blue )가 있습니다.

이제 이 지도에 색상을 추가할 수 있는 기능도 추가해 보겠습니다.

const addColor = (color, hex) => colors.setKey(color, { color, hex });

이렇게 하면 지도에 특정 개체가 추가되지만 키를 기반으로 기존 개체를 재정의할 수 있습니다.

그런 다음 지도와 이 추가 기능을 내보냅니다.

export { colors, addColor };

이제 이 색상 맵을 사용하도록 React 구성 요소를 수정해 보겠습니다.

import { useStore } from '@nanostores/react';
import { addColor, colors } from '../store/colors';

export default function React() {
  const colorItems = useStore(colors);

  return (
    <div>
      <ul>
        {Object.values(colorItems).map(({ color, hex }) => (
          <li key={color} style={{ backgroundColor: hex }}>
            {color} {hex}
          </li>
        ))}
      </ul>
      <button onClick={() => addColor('blue', '#a0c4ff')}>Change blue</button>
      <button onClick={() => addColor('red', '#ffadad')}>Add red</button>
    </div>
  );
}

이 코드는 지도를 렌더링하고 그 안에 있는 색상을 보여줍니다.
그런 다음 두 개의 버튼을 추가했습니다.

파란색 변경

새 빨간색 추가

프로젝트를 실행하면 파란색을 다른 16진수 값으로 변경할 수 있고 지도에 빨간색을 추가할 수도 있음을 알 수 있습니다.



소스 코드를 살펴보고 싶다면 여기에 추가했습니다GitHub branch.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나