React로 입력하는 동안 검색 결과를 필터링하는 방법

검색 창은 사용자가 웹사이트에서 필요한 것을 찾는 데 도움이 되는 훌륭한 방법입니다. 방문자가 검색하는 내용을 추적하는 경우 분석에도 유용합니다.

듀얼 부팅 Windows 10 및 Linux

React를 사용하여 사용자가 입력할 때 데이터를 필터링하고 표시하는 검색 창을 만들 수 있습니다. React 후크와 JavaScript 맵 및 필터 배열 메서드를 사용하면 최종 결과는 반응형의 기능적인 검색 상자가 됩니다.

MAKEUSEOF 오늘의 비디오

검색창 만들기

검색은 사용자로부터 입력을 받아 필터링 기능을 트리거합니다. 당신은 할 수 있습니다 Formik과 같은 라이브러리를 사용하여 React에서 양식 생성 , 하지만 처음부터 검색창을 만들 수도 있습니다.

React 프로젝트가 없고 따라하고 싶다면 create-react-app 명령을 사용하여 생성하세요.

npx create-react-app search-bar

에서 앱.js 파일에 입력 태그를 포함하여 양식 요소를 추가합니다.

export default function App() { 
   return ( 
    <div> 
        <form> 
          <input type="search"/> 
        </form> 
    </div> 
  ) 
}

당신은 사용해야합니다 사용 상태 반응 후크 그리고 온체인지 입력을 제어하는 이벤트입니다. 따라서 useState를 가져오고 상태 값을 사용하도록 입력을 수정합니다.

import { useState } from "React" 
export default function App() { 
     const [query, setquery] = useState('') 
     const handleChange = (e) => { 
       setquery(e.target.value) 
     } 
     return ( 
      <div> 
          <form> 
            <input type="search" value={query} onChange={handleChange}/> 
          </form> 
      </div> 
    ) 
  }

사용자가 입력 요소 내부에 무언가를 입력할 때마다 핸들변경 상태를 업데이트합니다.

입력 변경 시 데이터 필터링

검색 표시줄은 사용자가 제공한 쿼리를 사용하여 검색을 트리거해야 합니다. 이는 handleChange 함수 내부의 데이터를 필터링해야 함을 의미합니다. 또한 상태에서 필터링된 데이터를 추적해야 합니다.

먼저 데이터를 포함하도록 상태를 수정합니다.

const [state, setstate] = useState({ 
  query: '', 
  list: [] 
})

각 값에 대해 하나씩 생성하는 대신 이와 같이 상태 값을 번들링하면 렌더링 수가 줄어들어 성능이 향상됩니다.

필터링하는 데이터는 검색을 수행하려는 모든 데이터가 될 수 있습니다. 예를 들어 다음과 같은 샘플 블로그 게시물 목록을 만들 수 있습니다.

const posts = [ 
    {   
      url: '', 
      tags: ['react', 'blog'], 
      title: 'How to create a react search bar', 
    }, 
    { 
      url:'', 
      tags: ['node','express'], 
      title: 'How to mock api data in Node', 
    }, 
    // more data here 
  ]

당신은 또한 수 API를 사용하여 데이터 가져오기 CDN 또는 데이터베이스에서.

다음으로, 사용자가 입력 내부에 입력할 때마다 데이터를 필터링하도록 handleChange() 함수를 수정합니다.

const handleChange = (e) => { 
    const results = posts.filter(post => { 
        if (e.target.value === "") return posts 
        return post.title.toLowerCase().includes(e.target.value.toLowerCase()) 
    }) 
    setstate({ 
        query: e.target.value, 
        list: results 
    }) 
}

이 함수는 쿼리가 비어 있는 경우 검색하지 않고 게시물을 반환합니다. 사용자가 쿼리를 입력한 경우 게시물 제목에 쿼리 텍스트가 포함되어 있는지 확인합니다. 게시물 제목과 쿼리를 소문자로 변환하면 비교가 대소문자를 구분하지 않습니다.

필터 메서드가 결과를 반환하면 handleChange 함수는 쿼리 텍스트와 필터링된 데이터로 상태를 업데이트합니다.

검색 결과 표시

검색 결과를 표시하려면 다음을 사용하여 목록 배열을 반복해야 합니다. 지도 방법 및 각 항목에 대한 데이터를 표시합니다.

export default function App() { 
// state and handleChange() function 
   return ( 
    <div> 
        <form> 
          <input onChange={handleChange} value={state.query} type="search"/> 
        </form> 
        <ul> 
          {(state.query === '' ? "" : state.list.map(post => { 
            return <li key={post.title}>{post.title}</li> 
          }))} 
        </ul> 
    </div> 
  ) 
}

ul 태그 내에서 구성 요소는 쿼리가 비어 있는지 확인합니다. 그렇다면 사용자가 아무 것도 검색하지 않았으므로 빈 문자열을 표시합니다. 이미 표시하고 있는 항목 목록을 검색하려면 이 선택을 제거하십시오.

쿼리가 비어 있지 않으면 map 메서드는 검색 결과를 반복하고 게시물 제목을 나열합니다.

검색 결과가 반환되지 않는 경우 유용한 메시지를 표시하는 검사를 추가할 수도 있습니다.

<ul> 
  {(state.query === '' ? "No posts match the query" : !state.list.length ? "Your query did not return any results" : state.list.map(post => { 
    return <li key={post.title}>{post.title}</li> 
  }))} 
</ul>

이 메시지를 추가하면 사용자가 빈 공간을 바라보는 일이 없기 때문에 사용자 경험이 향상됩니다.

두 번 이상의 검색 매개변수 처리

JavaScript 이벤트와 함께 React 상태 및 후크를 사용하여 데이터 배열을 필터링하는 사용자 지정 검색 요소를 만들 수 있습니다.

필터 함수는 쿼리가 배열 내부의 객체에서 하나의 속성(제목)과 일치하는지 여부만 확인합니다. 논리적 OR 연산자를 사용하여 쿼리를 개체의 다른 속성과 일치시키면 검색 기능을 향상시킬 수 있습니다.