React-tags: 사용 상태

안녕하세요, 예, 구성 요소는 클래스 기반 구성 요소와 마찬가지로 useState() 에서도 잘 작동합니다.

후크를 사용하여 친절하게 공유할 수 있는 예가 있습니까? 제어된 구성 요소를 사용하고 싶습니다.

후크를 사용하여 친절하게 공유할 수 있는 예가 있습니까? 제어된 구성 요소를 사용하고 싶습니다.

import React, { useState, useRef } from 'react'

export default function MyForm() {

  const tagsInput = useRef(null);

  const [tags, setTags] = useState([]);
  const [suggestions, setSuggestions] = useState([]);
  const [tagAutocompleteBusy, setTagAutocompleteBusy] = useState(false);

  async function onTagInput(query) {
      if (!tagAutocompleteBusy) {
          setTagAutocompleteBusy(true);
          const result = await fetch(`/tags/autocomplete?term=${query}`);
          setSuggestions(result.data);
          setTagAutocompleteBusy(false);
          return result;
      }
  }

  const onTagDelete = (i) => {
      setTags(() => {
          tags.splice(i, 1);
          return tags;
      });
  }

  const onTagAddition = (tag) => {
      setTags(() => {
          return [...tags, tag];
      });
  }

  return (<>
    <ReactTags
        ref={tagsInput}
        tags={tags}
        suggestions={suggestions}
        onDelete={onTagDelete}
        onAddition={onTagAddition}
        onInput={onTagInput}
    />
  </>);
}

@kulahin 예제를 공유할 시간을 내주셔서 감사합니다.