검색기능 구현

const [searchInput, setSearchInput] = useState("");
const [filteredRows, setFilteredRows] = useState([]);

// 엔터키 입력
  const activeEnter = (e) => {
    if (e.key === "Enter") {
      handleSearch();
    }
  };

  // 검색기능 구현
  const handleSearch = async () => {
    try {
      const response = await axios.get(
        `http://localhost:4000/wallet/money/find/${searchInput}`
      );
      const formattedData = response.data.map((item) => ({
        ...item,
        date: formatDate(item.date),
      }));
      setFilteredRows(formattedData);
    } catch (err) {
      console.error(err);
    }
  };

원래 있던 const [rows, setRows] = useState([]) 를 없애고 대신 [filteredRows, setFilteredRows] = useState([])로 바꿔준다. 검색기능을 구현하면 그에 맞는 행을 띄워줘야 하기 때문에 업데이트를 위해서 바꿔준다.

검색기능을 구현할 때, enter키를 입력하지 않고, 버튼을 클릭해야만 검색되기 때문에 엔터키 입력을 넣어줬다. 이벤트로 들어온 키가 Enter라면 handleSearch()가 실행되도록 만들었다.

handleSearch()에서 axios요청을 보낼 때, <Input>태그에서value={searchInput}으로 입력한 값을 보낸다. 그리고 백엔드에서 const search = req.params로 받아서 파싱을 해준다.

이제 검색어를 입력하는 부분을 구현해보면, 원래는 SearchIcon이 오른쪽에 놓으려고 했는데, 사이즈가 작아지면 버튼 모습이 월별 필터와 겹쳐서 안보이기 때문에 왼쪽으로 구현했다.

• 어떻게 안되나 고민하던 찰나, 실시간으로 구현 해버렸다.

아직 리액트에 대해 부족한게 많다. 이번 기회로 많이 구현해서 몸으로 체득해야 할 것 같다.

<Input value={handleInput} onChange={handleSearchChange} placeholder="Search.." onKeyDown={(e) => activeEnter(e)}/>
<Button>
  <SearchIcon/>
</Button>
<Select
  sx={{ "& .MuiSelect-select": { padding: "5px" } }}
  className="monthFilter"
  onChange={monthFilter}>
	<MenuItem value="" disabled></MenuItem>
	{months.map((month) => {
   	  <MenuItem key={month.number} value={month.number}>{month.name}</MenuItem>
    })}
</Select>

activeEnter()를 실행하면 handleSearch()가 실행되도록 했다. activeEnter()의 위치는 <Input>태그의 onKeyDown={(e) => activeEnter(e)} 에 연결해서 키가 눌리면 activeEnter()가 발동되도록 하면 구현된다.