계산된 나노 저장소

이제 Maps with Nano Stores을 살펴보았으므로 다음 요소인 계산된 저장소를 살펴보겠습니다.

계산된 저장소는 초기 정적 저장소를 가져와 일부 컴퓨팅을 수행할 수 있습니다.
두 개의 다른 저장소에서 계산할 수도 있습니다.

Nano는 계산된 지도를 저장합니다.

이 문서를 따르려면 이 문서GitHub branch를 시작점으로 사용하세요.

가장 먼저 할 일은 기본이라는 색상 개체에 새 값을 추가하는 것입니다.
이를 사용하여 색상이 기본 색상인지 확인할 수 있습니다.
src/store/colors.js 파일을 열고 색상 맵을 변경합니다.

const colors = map({
  blue: {
    primary: true,
    color: 'blue',
    hex: '#9bf6ff',
  },
  green: {
    primary: false,
    color: 'green',
    hex: '#caffbf',
  },
});

그런 다음 계산된 값 목록을 추가하여 시작할 수 있습니다.
먼저 가져옵니다.

import { computed, map } from 'nanostores';

그런 다음 사용할 수 있습니다. 지도를 사용하고 있기 때문에 개체 값을 수동으로 추출해야 합니다.
Atom을 사용하고 있었다면 Atom을 직접 반복할 수 있습니다.

const primaryColors = computed(colors, (list) =>
  Object.values(list).filter((item) => item.primary)
);

이제 React.jsx 구성 요소로 이동하여 사용할 버튼을 더 추가해 보겠습니다.

<button onClick={() => addColor('blue', '#a0c4ff', true)}>Change blue</button>
<button onClick={() => addColor('red', '#ffadad', true)}>Add red</button>
<button onClick={() => addColor('purple', '#bdb2ff', false)}>Add purple</button>

이제 기본 색상을 로드하고 useStore에 할당해 보겠습니다.

import { primaryColors } from '../store/colors';

const primaryItems = useStore(primaryColors);

그런 다음 기존 목록 아래에서 기본 색상 목록을 렌더링합니다.

<h4>Primary colors</h4>
<ul>
    {Object.values(primaryItems).map(({color, hex}) => (
        <li key={color} style={{ backgroundColor: hex }}>
            {color} {hex}
        </li>
    ))}
</ul>

이제 애플리케이션을 실행할 수 있습니다. 버튼을 클릭해 보십시오. 이 클릭으로 맵과 계산된 목록이 모두 변경됩니다!



평소와 같이 GitHub에서 전체 코드를 찾을 수도 있습니다.

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

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