[React] 검색 기능 구현

monsterSave의 html(?) 부분

//monsterSave.js
return(
<>
  <div className="monsters">
    <div className="monsters-title">
        <h1 className="title">Monsters</h1>
        <input className="search" value={monsterSearch} placeholder="Search" onChange={searchMonster}/>
        <CardList monsterList = {filteredItem}/>
      </div>
  </div>
</>
)};

css 부분

//monsterSave.scss
*{
  box-sizing: border-box;
}
body{
  background-color: black;
  width: 100%;
  height: 100vh;
}
.monsters{
  .title {
    color: white;
  }
  .monsters-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
  }
  .search {
    margin-bottom: 30px;
  }
}

// CardList.scss
.cardList {
  width: 85vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  }

// Card.scss
import React from "react";
import './Card.scss';

function Card({monster}){
  const { name, email, id } = monster;
  
  return(
    <div className="card">
      <div className="card-box">
      <img src={`https://robohash.org/${id}?set=set2&size=180x180`} alt="monster" />
      <h2>{name}</h2>
      <p>{email}</p>
      </div>
    </div>
  )
}

export default Card;

js 부분

// MonsterSave.js
function Monsters() {
  const [monsterCard, setMonsterCard] = useState([]);
  const [monsterSearch, setMonsterSearch] = useState('');

useEffect(() => {
fetch("가져올  json")
.then((response) => response.json())
.then((result) => setMonsterCard(result));
}, []);

1.mosters()에서 monsterCard는 setMonsterCard로 값을 받아서 값들이 저장되어있습니다. console.log하면 바로 확인할 수 있습니다.

2. fetch로 json를 가져오고 json한 것을 setMonsterCard에 저장합니다

html 부분을 보면 CardList가 있는데 그 코드의 monsterList의 값은 아래와 같습니다.

//MonsterSave.js
 const filteredItem = monsterCard.filter((monster) => monster.name.toLowerCase().includes(monsterSearch.toLowerCase())
  );

검색하도록 필터하는 부분입니다. monsterCard를 filter해서 monster.name을 대문자로 바꾸고 그 값이 포함되어있는지 includes로 확인합니다 monsterSearch는 사용자가 입력한 값이 저장되어있습니다. 똑같이 대문자로 바꾸고 진행합니다.

// 	CardList.js
import React from "react";
import Card from '../Card/Card';
import './CardList.scss';

function CardList({monsterList}) {
  return (
    <div className="cardList">
      {monsterList.map((monster)=> (
        <Card key={monster.id} monster={monster} />
      ))}
    </div>
  )
}

export default CardList;

저 html 부분에서 CardList를 컴포넌트화하여 monsterList로 filteredItem을 넣어 보냈었습니다. filteredItem을 CardList에 매개변수로 넣고 map으로 데이터를 꺼내와 Card 자식 컴포넌트에 값을 넣습니다.

그럼 Card는 받은 값으로 적용하여 monsterList 개수만큼 나옵니다.

// Card
import React from "react";
import Card from '../Card/Card';
import './CardList.scss';

function CardList({monsterList}) {
  return (
    <div className="cardList">
      {monsterList.map((monster)=> (
        <Card key={monster.id} monster={monster} />
      ))}
    </div>
  )
}

export default CardList;