React useMap 훅

소개

이 랩에서는 React 의 useMap 훅을 살펴봅니다. 이 훅은 상태를 관리하는 Map 객체와 이를 조작하기 위한 일련의 함수들을 생성합니다. 이 훅을 사용하면 복잡하고 오류가 발생하기 쉬운 로직을 작성하지 않고도 React 컴포넌트에서 키 - 값 쌍을 쉽게 관리하고 업데이트할 수 있습니다. 이 랩에서는 useMap 훅의 구현을 안내하고 샘플 애플리케이션에서 사용법을 시연합니다.

React useMap 훅

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

• useMap() 훅은 React 훅을 사용하여 상태를 관리하는 Map 객체와 이를 조작하기 위한 일련의 함수들을 생성합니다.
• useState() 훅은 initialValue로 Map 상태를 초기화합니다.
• useMemo() 훅은 상태 설정자를 사용하여 map 상태 변수를 조작하는 일련의 비변이적 (non-mutating) 액션을 생성하여 매번 새로운 Map을 생성합니다.
• useMap() 훅은 map 상태 변수와 생성된 actions를 포함하는 배열을 반환합니다.
• MyApp 컴포넌트는 useMap() 훅을 사용하여 상태를 관리하는 Map 객체를 초기화하고, Map에서 항목을 추가, 재설정 및 제거하는 버튼을 제공합니다.
• JSON.stringify() 함수는 Map 객체를 읽기 쉬운 JSON 문자열로 형식화합니다.

const useMap = (initialValue) => {
  const [map, setMap] = React.useState(new Map(initialValue));

  const actions = React.useMemo(
    () => ({
      set: (key, value) =>
        setMap((prevMap) => {
          const nextMap = new Map(prevMap);
          nextMap.set(key, value);
          return nextMap;
        }),
      remove: (key) =>
        setMap((prevMap) => {
          const nextMap = new Map(prevMap);
          nextMap.delete(key);
          return nextMap;
        }),
      clear: () => setMap(new Map())
    }),
    [setMap]
  );

  return [map, actions];
};

const MyApp = () => {
  const [map, { set, remove, clear }] = useMap([["apples", 10]]);

  const handleAdd = () => set(Date.now(), new Date().toJSON());
  const handleReset = () => clear();
  const handleRemove = () => remove("apples");

  return (
    <div>
      <button
      <button
      <button disabled={!map.has("apples")}>
        Remove apples
      </button>
      <pre>{JSON.stringify(Object.fromEntries(map), null, 2)}</pre>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! React useMap Hook 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.