[React] 검색기능 만들기

JSON List에서 원하는 부분만 뽑아내는 검색기능 만들기

웹개발을 하다보면 필연적으로 마주하게 되는 기능 중에 하나인 검색기능이다.

다음과 같은 JSON 데이터가 있다고 치자.

const fruits = [
    {
      "name":"apple",
      "id":"1"
    },
    {
      "name":"banana",
      "id":"2"
    },
    {
      "name":"pear",
      "id":"3"
    },
    {
      "name":"grape",
      "id":"4"
    },
    {
      "name":"orange",
      "id":"5"
    },
    {
     "name":"tomato",
     "id":"6"
    }
  ];

이런 리스트에서 과일의 이름으로 검색을 하고 싶다.

일단 데이터의 이름을 기준으로 리스트를 랜더링 한다면

이런식으로 정렬된다.

정렬하기 위한 코드는 다음과 같다.

{fruits.map((fruit, index) => {
        return (
          //style 속성은 보이는 가독성을 높이기 위해서 설정한것
          <div
            style={{
              margin: "auto",
              marginTop: "50px",
              backgroundColor: "pink",
              fontSize: "20px",
              width: "100px",
            }}
            key={index}
          >
            {fruit.name}
          </div>
        );
      })}

여기에 검색을 위한 input을 추가해준다.
안의 값으로 검색을 할 수 있게 useState를 사용하여 onChange에 값을 저장해준다.

// searching중인 단어 저장하기 위한 변수
const [search, setSearch] = useState("");

//input onChange일때 실행되는 함수
const searching = (e) => {
  setSearch(e.target.value);
};

<input type="text" style={{ margin: "30px", height: "30px" }} onChange={searching} />

저장된 값을 가지고 데이터의 값과 비교를 하며 일치하는 데이터만 랜더링 해주면 끝!
값을 비교하고 뽑아내는데에는 filter함수를 사용한다.

{fruits.filter((fruit)=>{
        if (search === "") {
          return fruit;
        //toLowerCase() 함수로 대문자로 검색하는 경우도 검색이 가능하게 만들어줌
		//include를 사용한다면 포함이 된 것을 찾아내기 때문에 일부만 검색해도 검색이 가능
        } else if (fruit.name.toLowerCase().includes(search.toLowerCase())) { 
          return fruit;
        }
      })
      .map((fruit, index) => {
        return (
          <div
            style={{
              margin: "auto",
              marginTop: "50px",
              backgroundColor: "pink",
              fontSize: "20px",
              width: "100px",
            }}
            key={index}
          >
            {fruit.name}
          </div>
        );
      })}

이런식으로 검색이 됨