React - 입력 태그 생성

입력폼에 입력하고 엔터를 누르거나 +를 누르면 입력태그가 아래에 생성된다.
중복된 태그는 생성되지 않으며, 태그 x를 눌러 삭제도 가능하다

입력태그가 생성되고 나서 사용자의 편리함을 위해 포커스가 다시 입력폼에 돌아오게 하여
키보드에서 입력과 엔터만으로 통해 여러 태그들을 생성할 수 있게 했다.

const TagInput = () => {
  const [tags, setTags] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const navigate = useNavigate();
  const inputRef = useRef(null); 
  const user = useUserState(); // 사용자 정보 가져오기

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleInputKeyDown = (e) => {
    if (e.key === 'Enter' && inputValue.trim() !== '') {
      addTag();
      e.preventDefault();
    }
  };

  const addTag = () => {
    if (inputValue.trim() !== '' && !tags.includes(inputValue.trim())) {
      setTags([...tags, inputValue.trim()]);
      setInputValue('');
    }
    inputRef.current.focus();
  };

  const handleDelete = (indexToDelete) => {
    setTags(tags.filter((_, index) => index !== indexToDelete));
    inputRef.current.focus();
  };

handleInputChange 함수:

이 함수는 입력 필드의 값이 변경될 때 호출됩니다.
e.target.value를 통해 입력된 값을 가져와서 setInputValue 함수를 사용하여 inputValue 상태를 업데이트합니다.
사용자가 입력한 값을 실시간으로 추적하여 상태에 반영합니다.

handleInputKeyDown 함수:

사용자가 키를 누를 때 호출됩니다.
만약 눌린 키가 Enter 키이고 입력 값이 비어 있지 않은 경우에만 작동합니다.
e.preventDefault()를 호출하여 기본 Enter 키 동작(폼 제출)을 방지합니다.
그런 다음 addTag 함수를 호출하여 태그를 추가합니다.

addTag 함수:

이 함수는 새로운 태그를 추가합니다.
입력 값이 비어 있지 않고, 중복되지 않은 경우에만 새 태그를 추가합니다.
setTags 함수를 사용하여 이전 태그 목록에 새로운 태그를 추가한 새 배열을 설정합니다.
setInputValue 함수를 사용하여 입력 값을 초기화합니다.
마지막으로, inputRef.current.focus()를 호출하여 입력 요소에 포커스를 맞춥니다.

handleDelete 함수:

이 함수는 삭제할 태그의 인덱스를 받아와서 해당 태그를 제거합니다.
tags.filter 메서드를 사용하여 삭제할 인덱스를 제외한 나머지 태그들로 새 배열을 생성하여 setTags를 호출하여 상태를 업데이트합니다.
마지막으로, inputRef.current.focus()를 호출하여 입력 요소에 포커스를 맞춥니다.