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

구현 하려는 동작

=> 검색어를 받아와서 해당 탭의 데이터와 검색어가 일치하는 값을 출력

 

문제점

=> 일단 해당 값을 출력하는건 되었는데, 그 값이 없는 배열들이 빈 배열로 출력되고 있음

 

해야할 것

=> 빈 배열 없애기

const handleSearch = () => {
    const keyword = searchInpRef.current.value.toLowerCase(); // 검색어 값

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

    setSearchTerm(keyword);
    const filteredData = extractedValues[activeTab].map(tab =>
        tab.filter(data => 
            JSON.stringify(data).toLowerCase().includes(keyword)
        )
    )

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

 

 

 

📚  수정코드 📚

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 값은 제외하고 필터링

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

 

=> map() 내부에서 filter()로 데이터를 필터링한 후, 빈 배열이 나올 경우 null을 반환 == 빈 배열을 대신하는 값

 

 

일단 여기까지는 내가 원하는대로 됨!

근데 이제.. 저 중첩배열안에 값이 서브 말고 다른 값들도 가져와야되는데.. 😢 어려버..

 

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