🟦 [React] 검색 기능 구현해보기 2
이전 로그👇
🟦 [React] 검색 기능 구현해보기
구현 하려는 동작=> 검색어를 받아와서 해당 탭의 데이터와 검색어가 일치하는 값을 출력 문제점=> 일단 해당 값을 출력하는건 되었는데, 그 값이 없는 배열들이 빈 배열로 출력되고 있음 해야
dazzle-bini.tistory.com
✔ 구현하려는 기능: 저 상태에서 이제 해당하는 문자가 있는 배열을 가져오고 싶다.
추가 코드👇
// 검색 결과가 있는 데이터 배열만 필터링
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("---------------------")
}
이제 이걸 화면에 뿌리기만 하면..!! 완성!
