ReactJS에서 실시간 검색

Hello Guys 오늘은 버튼을 클릭하지 않고 실시간으로 React에서 요소를 검색하는 방법을 보여 드리겠습니다. 검색은 실시간으로 이루어지며 단어를 입력하면 해당 단어를 포함하는 모든 요소가 필터링되어 표시됩니다.

이 코드에 샘플 데이터를 사용했습니다. 이 코드에도 데이터를 사용할 수 있습니다.

데이터 -

const Data = [

        {
          "id": "61050f211ab57ba6cd86b1e8",
          "name": "Valeria Ramos"
        },
        {
          "id": "61050f21aa707624a853421b",
          "name": "Campos Daniels"
        },
        {
          "id": "61050f21ec0c4d434eedda85",
          "name": "Kate Gilbert"
        },
        {
          "id": "61050f21a4543be9235f4643",
          "name": "Hunt Lynch"
        },
        .
        .
        .
        .
        .
    ];

검색 코드 -

import React,{useState} from 'react'
import Data from './SampleData'
import './App.css';

function App() {

    const [list, setList] = useState("");


    return (
        <div className="text-center my-5">
            <input 
            type="text"
            placeholder="search..."
            onChange={(event) => {
                setList(event.target.value);
            }}
            />

            <div  className="main">
                {Data.filter((item) => {
                    if(list === ""){
                        return item;
                    }
                    else if(item.name.toLowerCase()
                            .includes(list.toLowerCase())){
                        return item
                    }

                }).map((item) => (
                    <div key={item.id}><p className="items"> 
                      {item.name}
                    </p></div>
                ))
                }
            </div>
        </div>
    )

}

export default App;

일하고 있는 -

먼저 useState를 사용하여 입력 요소에 대한 상태를 만들었습니다.

그런 다음 입력 태그를 사용하여 입력 요소를 만들고 그 안에 onChange 이벤트가 있고 onChange 내에서 입력 필드에 입력된 단어와 일치하는 목록의 상태를 변경합니다.

그런 다음 필터 방법을 사용하여 데이터를 필터링했습니다.
4.if(list===""){ return item;} , 입력 필드가 비어 있으면 전체 데이터를 반환한다는 의미입니다.

else if(item.name.toLowerCase().includes(list.toLowerCase())){
물건을 돌려 주다 }
먼저 toLowerCase() 메서드를 사용하여 이름을 소문자로 변환한 다음 입력된 단어가 포함(included() 메서드)을 사용하여 Dataset에 포함되어 있는지 확인하고 입력된 단어를 toLowerCase() 메서드를 사용하여 소문자로 변환합니다. 또한 소문자 형식입니다.

그런 다음 데이터를 필터링한 후 map() 메서드를 사용하여 데이터를 매핑했습니다

.

CSS -

p{
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background-color: crimson;
  display: flex;
  justify-content: center;
  align-items: center;
  color: antiquewhite;
}
.main{
  margin: 5rem;
  display: grid;
grid-template-columns: repeat(4,1fr);
justify-content: center;
text-align: center;
}

출력 -

검색하기 전에



검색 후



과정을 이해해 주시고 실수가 있으면 댓글 섹션에 언급해 주시기 바랍니다. 그것은 내가 그것을 고칠 수 있도록 내 실수를 아는 데 도움이 될 것입니다.

이 게시물을 읽어주셔서 감사합니다