React 실시간 검색

1. 검색하려는 항목의 배열인 'data' prop을 사용하는 'RealTimeSearch' 구성 요소를 정의합니다.
2. 'useState' 후크를 사용하여 두 가지 상태, 즉 현재 검색 쿼리를 저장하는 'searchTerm'과 필터링된 결과를 저장하는 'filteredData'를 관리합니다.
3. 사용자가 입력 필드에 입력할 때마다 handleInputChange 함수가 호출됩니다. searchTerm 상태를 업데이트한 다음 검색어를 기준으로 data 배열을 필터링합니다.
4. 대소문자를 구분하지 않고 검색하려면 'toLowerCase' 메서드를 사용합니다.
5. 필터링된 결과는 입력 필드 아래의 정렬되지 않은 목록(
   )에 표시됩니다.

import React, { useState } from 'react';

const RealTimeSearch = ({ data }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredData, setFilteredData] = useState(data);

  const handleInputChange = (e) => {
    const newSearchTerm = e.target.value;
    setSearchTerm(newSearchTerm);

    // Filter the data based on the search term
    const filteredResults = data.filter((item) =>
      item.toLowerCase().includes(newSearchTerm.toLowerCase())
    );

    setFilteredData(filteredResults);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleInputChange}
      />
      <ul>
        {filteredData.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};
export default RealTimeSearch;