Monster Cards List

위코드 과제 몬스터로 카드리스트 구현

import React, {useState, useEffect} from 'react';
import './Monsters.scss';
import CardList from './components/CardList/CardList';


function Monsters() { //api 호출 전 state 선언하기
  const [monsterList, setMonsterList] = useState([]);
  const [searchKeyword, setSearchKeyword] = useState('');

  const mosterSearch = (e) =>
  {setSearchKeyword(e.target.value);
  };

  // const filteredItem = monsterList.filter((monster) => 
  // monster.name.toLowerCase().includes(searchKeyword.toLocaleLowerCase()))

  const filteredItem = monsterList.filter(({name}) => 
  name.toLowerCase().includes(searchKeyword.toLocaleLowerCase())) // 구조분해 할당 monster.name (X)

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then((result) => result.json())
    .then((data) => setMonsterList(data));
  }, []);

  return (
    <div className="monsters">
      <h1 className="title">Monsters</h1>
      <input onChange={mosterSearch} className="search" value={searchKeyword} placeholder="Search" />
      <CardList 
      monsterList={filteredItem}/>
    </div>
  );
}

export default Monsters;

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

export default function CardList({monsterList}) {
  return (
  
        <div className='cardList'>
            {monsterList.map((monster) => (
                <Card key={monster.id}
                id={monster.id}
               name={monster.name}
               email={monster.email}
               username={monster.username}
                />
            ))}
        </div>
  )
}

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

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