[React] filter 함수를 활용한 검색 기능 (feat Axios)

개발을 하다보니 검색 기능은 대부분 서비스에 있다는 것을 알게 되었다..

하여 이참에 url에 대해 검색 기능을 고려하는 것은 아니지만 map()함수를 통해 나열하고 있는 data에 대해 검색으로 거르는 내용을 담아보자 

 

1. Axios를 통해 데이터 불러오기 

백엔드 또는 API url을 get() 함수를 통해 받아온다.

  useEffect(() => {
    // Axios를 사용하여 데이터를 불러옴
    axios.get('https://api.example.com/data')
      .then((response) => {
        setData(response.data); // 데이터를 상태에 저장
      })
      .catch((error) => {
        console.error('데이터를 불러오는 동안 오류 발생: ', error);
      });
  }, []);

2.  Input 태그에 onChange 함수를 통해 입력된 값 저장하기

입력 핸들러 함수를 하나 생성하여 입력 받은 데이터를 hook을 통해 저장한다. 

  const handleSearchChange = (e) => {
    const searchText = e.target.value;
    setSearchText(searchText);
  
   <input
        type="text"
        placeholder="검색어 입력"
        value={searchText}
        onChange={handleSearchChange}
      />

3.  filter함수를 통해 검색 기능 완성하기

filter함수에 Input을 통해 입력받은 데이터와 axios.get()을 통해 저장한 값을 include() 함수를 통해 검색어가 포함된 데이터를 찾는다.

 // 검색어에 맞게 데이터 필터링
    const filtered = data.filter((item) => {
      return item.name.includes(searchText); // 예시: 데이터 객체의 'name' 속성에 검색어가 포함되어 있는 경우 필터링
    });

    setFilteredData(filtered);

4.  전체 코드 

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]); // 데이터를 저장할 상태
  const [filteredData, setFilteredData] = useState([]); // 필터링된 데이터를 저장할 상태
  const [searchText, setSearchText] = useState(''); // 검색어를 저장할 상태

  useEffect(() => {
    // Axios를 사용하여 데이터를 불러옴
    axios.get('https://api.example.com/data')
      .then((response) => {
        setData(response.data); // 데이터를 상태에 저장
      })
      .catch((error) => {
        console.error('데이터를 불러오는 동안 오류 발생: ', error);
      });
  }, []);

  // 검색어 입력 핸들러
  const handleSearchChange = (e) => {
    const searchText = e.target.value;
    setSearchText(searchText);

    // 검색어에 맞게 데이터 필터링
    const filtered = data.filter((item) => {
      return item.name.includes(searchText); // 예시: 데이터 객체의 'name' 속성에 검색어가 포함되어 있는 경우 필터링
    });

    setFilteredData(filtered);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="검색어 입력"
        value={searchText}
        onChange={handleSearchChange}
      />
      <ul>
        {filteredData.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;