useSet

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

인터페이스

function useSet<T>(
  initialState?: SetOrValues<T>
): [Omit<Set<T>, 'add' | 'clear' | 'delete'>, SetActions<T>];

파라미터

• initialStateSet<T> | T[]
  

  초기 Set 상태 (Set 객체 또는 값의 배열). 기본값은 빈 Set이에요.

반환 값

• [Set, SetActions]
  

  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을 초기 상태로 리셋해요.

예시

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>
  );
}