[React--Monster예제 2] Search filter기능 구현~!

🔍 Search기능 구현

• 지난 블로그에서 monsters 리스트를 Card컴포넌트를 재사용해서 구현했다면 이번에는 검색 필터링 기능을 구현해 보겠다.

1. 검색 input 값 useState에 저장!

const [userInput, setUserInput] = useState("");
.
.
const handleChange = (e) => {
    setUserInput(e.target.value);
  };
.
.
.
<SearchBox handleChange={handleChange} />

• SearchBox에 onChange 이벤트가 일어나면 실행될handleChange함수는 현재 input의 값을 userInput에 저장한다.

자 그럼 해야할 건?

• input값과 monsters name값을 비교해 필터링해준다.

filter()

const searchValue = monsters.filter((list) =>
   list.name.toLowerCase().includes(userInput.toLowerCase())
  );

• monsters에 name값은 첫글자가 대문자기 때문에 roLowerCase()를 이용해 소문자로 바꿔준다.
• 검색창에 대문자로 입력될 경우를 생각해 userInput값도 소문자로 바꿔준다.

searchValue라는 변수로 저장된 monsters list는??

👉 CardList

<CardList monsters={monsters} />
👇👇👇👇👇👇👇👇  
<CardList monsters={searchValue} />

• 기존에 monsters 리스트전체를 넘겨줬다면 필터링된 값들을 props로 넘겨준다.

결과 화면