검색 기능 만들어보기

기존 데이터의 제목 또는 내용을 입력 후 검색 버튼을 누르면 내가 원하는 제목이나 내용을 포함하는 필터링된 데이터를 얻고 싶었다.

state를 만들어주자.

// 데이터
const [data, setData] = useState([]);
// 검색창
const [inputValue, setInputValue] = useState('');
// 검색 결과 필터링 된 데이터
const [filteredData, setFilteredData] = useState([]);

인풋을 만들어주기.

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
    </>
  );

필터링된 데이터를 만들어주기.

const filteredSearchData = data.filter(
      (item) =>
        item.제목.includes(inputValue) ||
        item.내용.includes(inputValue)
);

버튼 만들어주기.

const handleSearch = () => {
  setFilteredData(filteredSearchData);
  console.log('검색 결과: ', filteredData);
};

...

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleSearch}>검색</button> // 추가
    </>
  );

버튼 안에 필터링된 데이터를 넣어 지역 변수로 사용.

const handleSearch = () => {
  const filteredSearchData = data.filter(
      (item) =>
        item.제목.includes(inputValue) ||
        item.내용.includes(inputValue)
  );
  setFilteredData(filteredSearchData);
  console.log('검색 결과: ', filteredData);
};

검색어 또는 검색 결과 없을 경우 유저에게 에러 메세지 표시 추가.

const handleSearch = () => {
  if (!inputValue) {
  alert('검색어 입력 후 버튼을 클릭해주세요.');
  return;
  }
  
  const filteredData = data.filter(
      (item) =>
        item.제목.includes(inputValue) ||
        item.내용.includes(inputValue)
  );
  
  if (filteredData.length === 0) {
  alert('검색 결과가 없습니다.');
  return;
  }
  
  setFilteredData(filteredSearchData);
  console.log('검색 결과: ', filteredData);
};

이제 버튼을 누르면,

내가 원하는 결과가 출력된다.

추가. 공백으로 검색 시에도 데이터 출력되어 trim 메서드 사용으로 문자열 좌우 공백 제거해 처리해줌.

  if (!inputValue.trim()) {
    alert('검색어 입력 후 버튼을 클릭해주세요.');
    return;
  }