[React] AutoComplete Component

AutoComplete

input에 값을 입력하면 dropdown으로 유사한 추천 검색 옵션을 보여주는 자동 완성 기능
사용자 경험을 향상시킬 수 있음

요구사항

삭제 버튼으로 input의 값을 삭제 할 수 있어야 함
drop down 항목을 마우스로 클릭 시 input의 값이 변경되어야 함

의사코드

// 자동완성
1. 자동완성되는 키워드를 담은 배열 생성, 해당 키워드를 관리할 배열 useState 생성
2. 값이 입력되는 input에 onClick 이벤트 전달
3. onClick 이벤트 함수로 input의 값을 저장하는 useState 업데이트
4. input값이 업데이트 될 때마다 실행되는 useEffect 생성
5. useEffect에 자동완성 키워드를 담은 배열 중 input값과 일치하는 요소가 있는 부분만 filter로 업데이트

// input값 삭제
1. 삭제 버튼 생성
2. input의 value값을 관리하는 useState를 공백으로 전환하는 이벤트 전달

// 자동완성 키워드를 마우스 클릭시 input값 변경
1. 자동완성된 키워드를 표시하는 요소에 onClick 이벤트 생성
2. 해당 요소를 클릭했을 경우, 키워드 값 전달
3. 전달된 키워드를 input의 value값을 관리하는 useState로 전달

코드

const deselectedOptions = [
  'abcde',
  '가나다라마',
  '자동완성',
  '키워드',
  '배열',
  'ab-cd-ef',
  '가나가나',
];

export const Autocomplete = () => {
  const [hasText, setHasText] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const [options, setOptions] = useState(deselectedOptions);

  // 입력값이 바뀔 때마다 실행
  useEffect(() => {
    if (inputValue === '') {
      setHasText(false);
      setOptions([]);
    } else {
      setOptions(deselectedOptions.filter((ele) => ele.includes(inputValue)));
    }
  }, [inputValue]);

  // input값 입력 함수
  const handleInputChange = (event) => {
    const { value } = event.target;
    setInputValue(value);
    setHasText(true);
  };
  
  // 드롭다운의 추천 키워드를 클릭했을 때 입력값 변경 함수
  const handleDropDownClick = (clickedOption) => {
    setInputValue(clickedOption);
  };

  // 입력값 제거 함수
  const handleDeleteButtonClick = () => {
    setInputValue('');
  };

  return (
    <div className='autocomplete-wrapper'>
      <div>
        <input value={inputValue} onChange={handleInputChange} />
        <div className='delete-button' onClick={handleDeleteButtonClick}>
          &times;
        </div>
      </div>
      {hasText && (
        <DropDown options={options} handleDropDownClick={handleDropDownClick} />
      )}
    </div>
  );
};

export const DropDown = ({ options, handleDropDownClick }) => {
  return (
    <ul>
      {options.map((ele, idx) => {
        return (
          <li key={idx} onClick={() => handleDropDownClick(ele)}>
            {ele}
          </li>
        );
      })}
    </ul>
  );
};