[react] 검색 기능

react 검색 기능

useState , onChange 이용

<script>
	const [search, setSearch] = useState("");
    
    const handleSearch = (e) => {
    setSearch(e.target.value);
  };
</script>

onChange 함수를 이용해서 input의 value를 담을 useState를 작성한다.

검색 할 영화 제목 필터

<script>
	const filterTitle = movies.filter((p) => {
    return p.title
      .replace(" ", "")
      .toLocaleLowerCase()
      .includes(search.toLocaleLowerCase().replace(" ", ""));
  });
</script>

filterTitle 이라는 변수에 영화 api 정보들이 담겨있는 movies를 filter 메서드를 사용해 주어진 함수를 모두 만족하는 영화 제목을 받아오도록 했다.

그 과정에서 replace를 이용하여 공백 문자열을 모두 없애 띄어쓰기나 붙여쓰기를 하더라도 입력한 값이 나오도록 사용하였다.

includes 함수는 검색한 결과가 배열의 특정요소에 포함하는지 Boolean 타입으로 알려준다.
또한 includes는 대소문자를 구별하기 때문에 toLocaleLowerCase를 이용하여 모두 소문자로 통일시켜주었다.

컴포넌트 prop 전달

<script>
	const SearchBar = ({ search, handleSearch }) => {
  return (
    <div className="Search">
      <input type="text" value={search} onChange={handleSearch}></input>
    </div>
  );
};

export default SearchBar;

</script>

SearchBar라는 검색창 컴포넌트를 만들고 Home 컴포넌트에서 만들어둔 search 값과 handleSearch 함수를 전달한다.

<script>
	<SearchBar search={search} handleSearch={handleSearch} />
          <div className="movies">
            {filterTitle.map((movie) => (
              <Movie
                key={movie.id}
                id={movie.id}
                coverImg={movie.medium_cover_image}
                title={movie.title}
                year={movie.year}
                genres={movie.genres}
              />
            ))}
          </div>
</script>

영화정보를 보여주는 Movie 컴포넌트에 아까 filter해준 filterTitle을 map 함수를 이용해서 검색한 영화의 title을 가져와준다.

마무리..

리액트에서 검색기능을 만들면서 map , filter , replace , includes에 대해서 다시 한번 배우게 되었고 , 검색기능은 자주 사용할 것 같으니 여러번 반복해서 연습해야겠다.