useMap

useMap (Map 상태 관리)

useMap 훅은 React 상태로 사용할 수 있는 Map 객체를 반환해요. set, clear, delete 메서드가 상태를 업데이트하고 리렌더링을 트리거해요.

출처: 문서

본문

useMap 훅은 React 상태로 사용할 수 있는 Map 객체를 반환해요. set, clear, delete 메서드는 상태를 업데이트하고 리렌더링을 트리거해요.

import { PlusIcon, TrashIcon } from '@phosphor-icons/react';
import { ActionIcon, Group, Table } from '@mantine/core';
import { useMap } from '@mantine/hooks';

function Demo() {
  const map = useMap([
    ['/hooks/use-media-query', 4124],
    ['/hooks/use-clipboard', 8341],
    ['/hooks/use-fetch', 9001],
  ]);

  const rows = Array.from(map.entries()).map(([key, value]) => (
    <Table.Tr key={key}>
      <Table.Td>{key}</Table.Td>
      <Table.Td>{value}</Table.Td>
      <Table.Td>
        <ActionIcon onClick={() => map.set(key, value + 1)} fw={500}>
          <PlusIcon />
        </ActionIcon>
      </Table.Td>
      <Table.Td>
        <ActionIcon onClick={() => map.delete(key)} c="red">
          <TrashIcon />
        </ActionIcon>
      </Table.Td>
    </Table.Tr>
  ));

  return (
    <Table>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>Page</Table.Th>
          <Table.Th>Views last month</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>{rows}</Table.Tbody>
    </Table>
  );
}

정의 (Definition)

function useMap<T, V>(initialState?: [T, V][]): Map<T, V>;

더 알아보기 (Learn more)