[React] Tag Component

Tag Component

레이블 지정을 통해 구성이나 분류에 도움이 되는 키워드 집합을 만들 때 자주 사용

요구사항

• Enter 키를 통해 태그가 추가 되어야 함
• 입력한 값이 없는 상태 & 이미 동일한 값이 있는 상태에선 이벤트가 일어나면 안됨
• 태그가 추가된 후 Input 창이 비워져야 함
• 추가한 태그를 삭제할 수 있어야 함

의사코드

• 태그 만들기

1. useState로 태그를 담을 배열 생성
2. 해당 배열을 map으로 각자의 요소로 만들기

• 태그 입력

1. input에 onClick 이벤트 연결
2. onClick 이벤트가 일어났을 때, 해당 클릭된 키가 Enter 키인지 확인
3. input에 입력된 값이 공백인 경우 확인
4. 태그를 담은 배열에 입력된 값이 포함되어있는지 확인
5. 3-4 과정을 통과 후, 입력된 값을 배열 태그에 업데이트
6. 위 과정을 끝낸 후 input의 value 값을 공백으로 지정

• 태그 삭제

1. 클릭 이벤트가 발생했을 때, 이벤트가 발생한 요소의 인덱스 값을 삭제 함수로 전달
2. 태그가 담긴 배열에 filter 메소드를 사용, 해당 인덱스값과 일치하는 값을 제거

코드

import { useRef, useState } from 'react';

export const Tag = () => {
  const initialTags = ['CodeStates', 'kimcoding'];

  const inputRef = useRef();
  const [tags, setTags] = useState(initialTags);
  const removeTags = (indexToRemove) => {
    setTags((prev) => prev.filter((ele, idx) => idx !== indexToRemove));
  };

  const addTags = (event) => {
    const { value } = event.target;
    // 입력된 값이 없거나 이미 있는 태그면 추가하지 않기
    if (!value || tags.includes(value)) return;
    // 태그 추가
    setTags((prev) => [...prev, value]);
    // input 창 비우기
    inputRef.current.value = '';
  };

  return (
    <>
      <div>
        <ul id='tags'>
          {tags.map((tag, index) => (
            <li key={index} className='tag'>
              <span className='tag-title'>{tag}</span>
              <span
                className='tag-close-icon'
                onClick={() => removeTags(index)}
              >
                &#215;
              </span>
            </li>
          ))}
        </ul>
        <input
          className='tag-input'
          ref={inputRef}
          type='text'
          onKeyUp={(event) => {
            {
              if (event.key === 'Enter') {
                addTags(event);
              }
            }
          }}
          placeholder='Press enter to add tags'
        />
      </div>
    </>
  );
};

기억할 것

onKeyUp 이벤트의 경우, event의 keyCode 속성은 사용하지 않는 것을 권장
keyCode 대신 key 속성 사용할 것