🟦 [React] 검색 기능 구현해보기 2

이전 로그👇

🟦 [React] 검색 기능 구현해보기

 

 

728x90

 

✔ 구현하려는 기능: 저 상태에서 이제 해당하는 문자가 있는 배열을 가져오고 싶다.

추가 코드👇

// 검색 결과가 있는 데이터 배열만 필터링
const result =  extractedValues[activeTab].filter(data => data.some(value => value === keyword));

 

 

 

 

그 전에 출력하던 부분

=> filteredData : 해당 값만 출력

 

추가한 부분

=> result : 해당하는 값을 담고있는 배열도 같이 출력

 

 

 

 

 

 

 

 

근데 문제점...

메인을 검색하면 filteredData처럼 2개가 나와야하는데, 얘는 딱 값이 똑같은 것만 뱉는다... 수ㅣ익...

 

 

❓ 이유 ❓

=> value === keyword 이기 때문에 딱 일치하는 값만 뱉는다!

=> keyword 값을 포함하는 식으로 바꿔주면 될듯

 

해결방법

=> includes() 사용

=> const result =  extractedValues[activeTab].filter(data => data.some(value => value.includes(keyword)));

 

 

 

 

 

 

 

=> 메인이 '포함' 된 값이 있는 배열을 뱉는다

 

 

 

 

 

 

=> 메인2가 '포함' 된 값이 있는 배열을 뱉는다

 

 

 

 

 

📚 최종 코드 📚

const handleSearch = () => {
    const keyword = searchInpRef.current.value.toLowerCase();

    if (!searchInpRef.current || keyword.trim() === "") return;

    setSearchTerm(keyword);
    const filteredData = extractedValues[activeTab].map(tab =>{
        const filteredTab = tab.filter(data =>
            JSON.stringify(data).toLowerCase().includes(keyword)
        );
        return filteredTab.length > 0 ? filteredTab : null; // 빈배열은 나오지 않게
    }).filter(tab => tab !== null); // null 값은 제외하고 필터링

    // 검색 결과가 있는 데이터 배열만 필터링
    const result =  extractedValues[activeTab].filter(data => data.some(value => value.includes(keyword)));

    console.log("---------------------")
    console.log(searchInpRef.current.value)
    console.log(filteredData)
    console.log(result)
    console.log("---------------------")
}

 

 

이제 이걸 화면에 뿌리기만 하면..!! 완성!