useSet

리액트 훅으로, 상태로 Set을 관리해요. 효율적인 상태 관리를 제공하고 안정적인 액션 함수를 제공해요.

인터페이스

function useSet<T>(initialState: SetOrValues<T> = new Set()): UseSetReturn<T>;

파라미터

• initialStateSetOrValues<T>
  

  초기 Set 상태예요. Set 객체나 값의 배열을 넘길 수 있어요.

반환 값

• UseSetReturn<T>
  

  Set 상태와 이를 조작하는 액션을 담은 튜플이에요.

  • [0]Omit<Set<T>, 'add' | 'clear' | 'delete'>
    

    변경 메서드가 숨겨진 현재 Set 상태예요.

  • [1].add(value: T) => void
    

    Set에 값을 추가해요.

  • [1].remove(value: T) => void
    

    Set에서 값을 제거해요.

  • [1].toggle(value: T) => void
    

    값이 없으면 추가하고, 있으면 제거해요.

  • [1].setAll(values: Set<T> | T[]) => void
    

    Set의 모든 값을 교체해요.

  • [1].reset() => void
    

    Set을 초기 상태로 리셋해요.

예시

import { useSet } from 'react-simplikit';

function TagSelector() {
  const [selectedTags, { add, remove, toggle }] = useSet<string>(['react']);

  return (
    <div>
      {['react', 'vue', 'svelte'].map(tag => (
        <button key={tag} onClick={() => toggle(tag)}>
          {selectedTags.has(tag) ? '✓' : ''} {tag}
        </button>
      ))}
    </div>
  );
}