[React] filter()로 검색기능 구현하기 !

대부분의 웹서비스에 필수인 서치바! 실제 서비스랑은 다르지만 더미데이터를 활용해 쉽게 filter()함수를 이용해 검색기능을 구현해보려고 한다!

How to make Serachbar

우선 코드는 이렇다.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [searchTerm, setSearchTerm] = useState("");
  return (
    <div className="App">
      <input
        type="texy"
        placeholder="Search"
        onChange={(e) => {
          setSearchTerm(e.target.value);
        }}
        {dummyData.filter((val) =>{
          if(searchTerm == ""){
            return val
          }else if(val.title.toLowerCase().includes(searchTerm.toLowerCase())){
            return val
          }
        }
        }).map(data =>{
          return <p>dummyData.title</p>
        })}
      />
    </div>
  );
}

✔ 1.

1. 첫 번째로 useState를 만들어준다.
 const [searchTerm, setSearchTerm] = useState("");
 
2. 인풋에 입력에 onChanger이벤트를 만들고 입력될 때마다 searchTerm의 데이터가 바뀌게 된다.
<input
        type="texy"
        placeholder="Search"
        onChange={(e) => {
          setSearchTerm(e.target.value);
        }}

✔ 2.

3.이렇게 출력만 하던 map함수 앞에 filter함수를 만들어 준다.
  {dummyData.map(data =>{
          return <p>dummyData.title</p>
        })}

4. else if 조건문을 활용해 dummyData의 값과 onChange로 입력한 searchTerm의 값이 같다면 해당되는 값이 반환된다.
{dummyData.filter((val) =>{
          if(searchTerm == ""){
            return val
          }else if(val.title.toLowerCase().includes(searchTerm.toLowerCase())){
            return val
          }
        }
        }).map(data =>{
          return <p>dummyData.title</p>
        })}

✔ 3.결과

이렇게 내가 검색한 결과가 잘 나온다!

map()과 filter()에 대해서 알아보자.

이 둘의 공통점은 새로운 객체를 반환한다는 점이다.
매우 유용한 함수라서 까먹지 알고 알아놓으면 유용하게 활용할 수 있다.

map()

배열을 순회하며 요소마다 callback함수를 적용하고 새로운 배열을 반환한다.
요소들에 일괄적으로 함수를 적용하고 싶을 때 유용하다.

let numbers = [1, 4, 9]
// 일반 함수
let roots = numbers.map(function(num) {
    return Math.sqrt(num)
})

// 화살표 함수
let roots = numbers.map((num) => Math.sqrt(num))

//결과
 roots    [1, 2, 3]
 numbers [1, 4, 9]

filter()

배열의 각 요소에 대해서 ㅜㅈ오진 함수의 결과값이 true인 요소를 모아서 새로운 배열로 반환한다.
중복 제거와 같이 조건에 맞는 특정 요소들만 새 배열에 넣고 싶은 경우에 유용하다.

const people = ['james', 'leno', 'aubameyang', 'saka'];

const arsenalFilter = people.filter(word => word.length < 4);

console.log(arsenalFilter)

//결과
['saka']