[React] 🔍검색 기능 구현하기

🔍 검색기능

• 동물 리스트에서 검색어와 맞는 동물만 화면에 필터링 되게 하기
  검색어와 일치하는 동물 요소만 필터링 해주고, 필터링된 내용을 렌더링

🔍 전체코드

//App.jsx

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

// 1. 리스트 만들기
// 2. 검색어에 맞게 동물을 필터링하기

function App() {
  const items = ["강아지", "고양이", "토끼", "원숭이", "판다"]; //동물 리스트
  const [animals, setAnimals] = useState(""); //사용자가 입력한 내용
  const [search, setSearch] = useState(items); //검색어에 대한 필터내용

  useEffect(() => {
    if (animals === "") { //사용자가 입력한 데이터가 비어있다면 (null 적어도 된다)
      setSearch(items); // 전체리스트 렌더링 
    } else {
      setSearch(items.filter((animal) => animal.includes(animals))); //아래 설명 참고
    }
  }, [animals]); //사용자가 입력한 값이 변경 될 때만 리렌더링됨 

  const onChange = (e) => {
    setAnimals(e.target.value); 
  };

  return (
    <div className="App">
      <h3>검색 기능</h3>
      <input
        type="text"
        placeholder="검색어를 입력하세요"
        onChange={onChange}
      />
      <ul>
        {search.map((animal) => (
          <li key={animal}>{animal}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

기능을 구현할 때는 코드를 바로 작성하는 것보다 구현 할 순서나 내용을 글로 먼저 작성해보고, 흐름을 파악한 다음에 코드를 작성해서 만드는 게 더 편하게 구현할 수 있다

💡 검색기능 내용 정리

1. 리스트 만들기
2. 검색어에 맞게 동물을 필터링하기

💡 이해가 필요했던 부분

• 동물 리스트를 상수로 items 배열을 만들었다 이때 주의할 점은 items의 데이터는 고정이 되어있어야 한다. 값이 변경되지 않기 때문에 useState를 쓰는 게 아니라 const를 사용해야 한다.

• items 배열은 나열되어야 하기 때문에 map 함수를 사용했다 map으로 반복생성을 할 때에는 무조건 map을 돌릴 값이 배열이여야만 한다 map 돌리는 요소의 초기값이
  ❗배열이 아닐 경우에는 오류가 난다.❗

• items로 반복생성을 하지 않은 이유는 앞에서 말한 것과 내용이 동일하다. items의 배열은 고정값이다. 데이터가 변경이 되면 안 되기 때문에 search에 초기값을 items로 넣어줘서 사용했다

// items 배열에 animals(사용자가 입력한 동물들만) 필터링
setSharch(items.filter((animal) => animal.includes(animals)));

위에 코드를 설명하자면 search 초기값에는 items 즉 동물 전체 리스트가 있다. 동물 리스트에서 검색어와 일치하는 것만 필터링을 하게 하려면 search의 값을 변경해서 화면에 렌더링 되게 해야한다. 그래서 상태변화함수인 setSearch를 사용해서 items를 필터링 하는 것이다.
필터링 되는 조건은 animal(동물리스트)에서 검색어와 일치하는 동물들만 search의 값으로 설정해놓고, 필터링이된 동물리스트를 렌더링되게 해주는 것이다.

짧게 요약하자면 검색어와 일치하는 동물 요소만 필터링 해주고, 필터링된 내용을 렌더링 해주는 것이다.

➕ includes()란? 괄호안에 들어있는 것이 배열안에 있는 지 없는 지 Boolean 즉 true/false로 알려준다. 저 코드에서 알수 있는 것은 animal은 곧 items이기 때문에 itmes안에서 사용자가 작성한 데이터가 있는 지 없는 지 찾아주는 것을 알 수 있다.

---

2024-09-09 검색기능 추가 내용

검색 기능 구현하는 것을 안 보고 다시 만들어 봤다. 의도하진 않았지만 다시 만들고 보니 위에 코드랑 거의 똑같아서 추가된 내용만 적을것이다.
추가된 내용은 대문자, 소문자 구분 없이 검색 필터가 잘되는 지 확인해보고 싶어서 list안에 item들을 대문자와 소문자를 섞어서 넣었다.

toLowerCase()

해당 문자열을 소문자로 변환해서 반환하는 메서드이다. 이 메서드를 사용한 이유는 list에 대문자와 소문자가 섞여 있을 경우, 대소문자 구분 없이 필터링된 검색 결과를 보고싶어서이다.

작동하는 원리는 리스트에 있는 문자열을 검색할 때마다 소문자로 변경해서 반환하면 사용자가 아무리 대소문자를 구분없이 적어도 검색 기능이 일관되게 잘 작동되는 것을 알 수 있다.

검색 필터 추가된 코드

function App() {
  const searchList = [
    "Life Cycle",
    "event bubbling",
    "정규표현식",
    "Git",
    "검색기능",
  ];
  const [searchListCopy, setSearchListCopy] = useState(searchList);
  const [searchInput, setSearchInput] = useState("");

  useEffect(() => {
    if (searchInput === "") {
      setSearchListCopy(searchList);
    } else {
      const lowerCaseInput = searchInput.toLowerCase();
      setSearchListCopy(
        searchList.filter((filteredItem) =>
          filteredItem.toLowerCase().includes(lowerCaseInput)
        )
      );
    }
  }, [searchInput]);

  return (
    //...생략
  );
}

export default App;