React-몬스터과제 5단계

• SearchBox 컴포넌트에 정의한 handleChange 메소드를 넘겨주고,
  호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput 으로 setState.

• 필터링 로직 구현 (filter 메소드 활용)
  여기서 비교 대상은 monster 객체의 name 값입니다.
  소문자로 바꾼 monster.name 값과 userInput값을 비교.
  filter 메소드가 반환하는 값을 변수에 저장 후 return 문 안에 CardList에 props로 전달
  

1.Monstets.js 에서 SearchBox 에 props로 넘겨줄 handleChange 메소드 정의

const [userInput, setUserInput] = useState("");

const updateUserInput = (e) => {
    setUserInput(e.target.value);

  //userInput 의 세터함수가 해당 이벤트 실행시 인풋박스의 밸류 값을 받는 함수를 작성 

2.SearchBox 컴포넌트에 전달하기 (props)

//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태그의 값이 담기도록하는 함수

3. 필터링 로직 구현 (filter 메소드 활용)

///monsters.js

const sortedMonsters = monsters.filter((monster) => {
  return monster.name.toLowerCase().includes(userInput.toLowerCase());  
  ///각자의 값이 소문자로 모두 변환해서 일치하는지 비교 (toLowerCase())
});///필터메서드를 사용하여 monsters의 name 값이 userInput값이 포함 되었는지 여부를 파악하는 함수 sortedMonsters 구현

4. CardList에 넘겨준 {monsters}를 {sortedMonsters} 변환하여 필터 userInput에 값이 담기면 필터 {monsters}의 필터메소드를 통한 비교를 통해 그에 해당하는것만 렌더링 되게 한다

 <CardList monsters={sortedMonsters} /