🔎 검색 필터 만들어보기

🧪 예제 소개

리액트와 Express를 사용해 간단한 검색 필터를 만들었다.
쿼리스트링을 사용해 검색어와 관련있는 데이터를 서버에서 불러오려고 한다.

참고로 사용한 데이터의 타입은 아래와 같다.

type User = {
  id: number;
  first_name: string;
  last_name: string;
  email: string;
  gender: string;
}

const data: User[] = [...];

전체적인 실습 흐름은 다음과 같다.

• (useEffect 첫 실행) 모든 유저 데이터를 화면에 render > 검색어 입력 > state(query) 값 변경 > useEffect 실행 > state(query)를 쿼리스트링에 작성하고 서버로 전송 > 서버에서 query 값이 포함된 결과를 응답 > 필터링 결과를 화면에 render

🙋🏻 고민한 점

데이터를 어떻게 필터링할지 고민했다.
입력한 검색어가 'first_name', 'last_name', 'email' 필드 중 최소 한 곳에라도 포함된다면 해당 유저 데이터를 응답하려 했다.

data.filter(
  user =>
    user.first_name.toLowerCase().includes(query) ||
    user.first_name.toLowerCase().includes(query) ||
    user.first_name.toLowerCase().includes(query)
)

가장 먼저 떠오른 방식은 위와 같은데 나름의 문제점이 보였다.
우선 가독성이 떨어졌고, 필터링 조건이 늘어난다면 코드의 길이는 늘어날 수 밖에 없었다.
보다 더 개선된 필터링 로직이 필요했다.

어떻게 개선할지 고민하던 중 some 배열 메서드가 떠올랐다
'first_name', 'last_name', 'email' 문자열을 배열에 저장하고 some 메서드를 적용하기로 했다.

💻 전체 코드

클라이언트

// ✅ App.js (클라이언트)

import { useEffect, useState } from "react";
import axios from "axios";
import "./App.css";
import Table from "./Table";

function App() {
  const [query, setQuery] = useState("");
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const res = await axios.get(`http://localhost:3333?q=${query}`);
      setData(res.data);
    };
    if (query.length === 0 || query.length >= 2) fetchUsers();
  }, [query]);

  return (
    <div className="app">
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={e => setQuery(e.target.value)}
        className="search"
      />
      <Table data={data} />
    </div>
  );
}

export default App;

서버

서버 쪽 코드에 필터링 로직을 적용해 필터링 된 유저 데이터를 응답한다.

// ✅ index.js (서버)

import express from "express";
import cors from "cors";
import { Users } from "./users.js";

const app = express();
app.use(cors());

app.get("/", (req, res) => {
  const { q } = req.query;
  const keys = ["first_name", "last_name", "email"];
  const search = data =>
    data.filter(item => keys.some(key => item[key].toLowerCase().includes(q)));
  res.json(search(Users));
});
app.listen(3333, () => console.log("API is working!!"));

💡 결과

입력된 검색어가 포함된 유저 데이터만 성공적으로 렌더링 된다.
보다 더 최적화 된 필터링 로직에 대해서는 차차 공부해보자...✍🏻