SearchBox 컴포넌트
에 정의한 handleChange 메소드
를 넘겨주고,
호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput
으로 setState.
필터링 로직 구현 (filter 메소드 활용)
여기서 비교 대상은 monster 객체의 name 값입니다.
소문자로 바꾼 monster.name 값과 userInput값을 비교.
filter 메소드
가 반환하는 값을 변수에 저장 후 return 문 안에 CardList에 props로 전달
const [userInput, setUserInput] = useState("");
const updateUserInput = (e) => {
setUserInput(e.target.value);
//userInput 의 세터함수가 해당 이벤트 실행시 인풋박스의 밸류 값을 받는 함수를 작성
//monsters.js
<SearchBox handleChange={updateUserInput} />
//SearchBox.js
function SearchBox(props) {
return (
<input
className="search"
type="search"
placeholder="Search..."
onChange={props.handleChange}
/>
);
}
//onChange 이벤트가 실행되면 handleChange통해 updateUserInput가 실행된다 updateUserInput는 userInput를 이벤트가 걸린 SearchBox의 input태그의 값이 담기도록하는 함수
///monsters.js
const sortedMonsters = monsters.filter((monster) => {
return monster.name.toLowerCase().includes(userInput.toLowerCase());
///각자의 값이 소문자로 모두 변환해서 일치하는지 비교 (toLowerCase())
});///필터메서드를 사용하여 monsters의 name 값이 userInput값이 포함 되었는지 여부를 파악하는 함수 sortedMonsters 구현
<CardList monsters={sortedMonsters} /