React로 검색창 만들기

컴퓨터를 사용할 때 컴퓨터가 필요할 때 원하는 방식으로 정확히 원하는 작업을 수행하기를 원합니다. 올바른 파일이나 게시물을 빠르게 찾는 것은 생산성을 높이는 데 필수적입니다. 검색 엔진은 짧은 시간 내에 사용자가 필요로 하는 데이터를 찾는 데 매우 유용합니다. 이 게시물의 목표는 JavaScript 및 React에서 사이트에 대한 간단한 검색 엔진을 만드는 방법을 설명하는 것입니다.

데이터 확보
이 예에서는 가져오기 기능을 사용하여 .json 파일에서 데이터를 가져올 것입니다. .json에서 가져온 데이터는 화면에 표시하는 데 사용할 수 있는 배열에 저장됩니다.

/* App.js */
import React, { useState, useEffect } from "react"
import Header from "./Header"
import SearchBar from "./SearchBar"
import DataContainer from "./DataContainer"

function App() {
const [data, setData] = useState([])

useEffect(() => {
 fetch(url)
  .then(resp => resp.json())
  .then(dataArray => setData(dataArray))
},[])

return (
    <>
      <Header />
      <SearchBar />
      <DataContainer data={data}/>
    </>
  )
}

export default App

useState 만들기
useState는 웹 앱을 매우 동적으로 만들 수 있는 반응 도구입니다. useState 변수는 변수가 변경될 때마다 해당 변수를 사용하는 모든 항목을 업데이트합니다. 이를 사용하여 입력 필드가 변경될 때마다 데이터를 변경할 수 있습니다.

/* App.js */
const [searchString, setSearchString] = useState('')

그런 다음 텍스트 입력을 변경할 때마다 searchString을 변경하는 함수를 만들 수 있습니다.

/* App.js */
const handleSearch = (string) => {
 setSearchString(string)
}

...
  <SearchBar handleSearch={handleSearch} />

/* SearchBar.js */
function SearchBar({handleSearch}) {
  return (
    <div>
        <input
          onChange={handleSearch(e.target.value)}
          type="text"
        />
    </div>
  )
}

export default SearchBar

입력이 변경될 때마다 handleSearch는 useState를 동일한 값으로 업데이트합니다.

데이터를 사용하여 새 쿼리를 입력할 때마다 변경되는 별도의 배열을 만들 수 있습니다. .filter()를 사용하여 이를 수행하고 문자열에서 .includes()를 사용하여 필터링할 수 있습니다. useState를 사용했기 때문에 입력을 변경하면 배열이 변경됩니다.

/* App.js */
const searchArray = data.filter((item) => { 
 return item.name.toLowerCase().includes(searchString.toLowerCase())
})

handleSearch 다음에 searchArray를 생성해야 합니다. 그렇지 않으면 데이터가 여전히 이전 입력을 표시합니다.

/* App.js */
   <DataContainer data={searchArray}/>

마지막으로 DataContainer 구성 요소에 데이터를 전달합니다. 이제 모든 데이터가 필터링되었으며 DataContainer에서 사용할 준비가 되었습니다.