monster component making

import React, { Component } from "react";
import SearchBox from "./Components/SearchBox/SearchBox";
import CardList from "./Components/CardList/CardList";
import "./Monsters.scss";

/**********************************************************
  API 주소: https://jsonplaceholder.typicode.com/users
***********************************************************/

class Monsters extends Component {
  state = {
    monsters: [],
    userInput: ""
  };

  // 데이터 로딩, API호출, setState (monsters 에 저장)
  componentDidMount(){
    fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => res.json())
    .then(res => {
      console.log("결과: ", res)
      this.setState ({ monsters: res });
    });
  }

  // SearchBox 에 props로 넘겨줄 handleChange 메소드 정의
  //SearchBox 컴포넌트에 정의한 handleChange 메소드를 넘겨주고, 
  //호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput 으로 setState.
  handleChange = e => {
    this.setState({
      userInput: e.target.value, 
    })  

  }

  render() {
    const{ userInput,monsters } = this.state

    //필터링 로직 구현 (filter 메소드 활용)
    //소문자로 바꾼 monster.name 값과 userInput값을 비교.
    //filter 메소드가 반환하는 값을 변수로 저장 후 return 문 안에 CardList에 props로 전달
    const result = monsters.filter((monster) =>
      monster.name.toLowerCase().includes(userInput))

    return (
      <div className="Monsters">
        <h1>컴포넌트 재사용 연습!</h1>
      //searchBox 컴포넌트에 handleChange 함수를 넘겨준다
        <SearchBox handleChange={ this.handleChange } />
	  //CardList 컴포넌트에 monsters 요소에 result변수를 선언
        <CardList monsters={result} />
      </div>
    );
  }
}

export default Monsters;

import React, { Component } from "react";
import "./SearchBox.scss";

class SearchBox extends Component {
  render() {
    return (
      <input
        className="search"
        type="search"
        placeholder="Search..."
        onChange={this.props.handleChange}//monsters.js에서 handleChange함수를 받아옴
      />
    );
  }
}

export default SearchBox;

import React, { Component } from "react";
import Monsters from "../../Monsters";
import Card from "../Card/Card";
import "./CardList.scss";

class CardList extends Component {
  
  render() {
    
  const {monsters} = this.props
  //props로 내려받은 데이터에 map 함수를 호출해 각각 다른 데이터를 가진 Card 컴포넌트들을 리턴
 //Card 컴포넌트에서 필요로 하는 데이터는 id, name, email 이다
  const list = monsters.map((card) => 
  <Card 
  key={card.id}
  id={ card.id } 
  name={card.name} 
  email={ card.eamil }
   />)

  return <div className="card-list"> { list } </div>
  }
}
export default CardList;

import React, { Component } from "react";
import "./Card.scss";

/***********************************************************
  Card 컴포넌트 구조
    <img src=이미지주소 alt="">
	  <h2>Name</h2>
	  <p>Email</p>

  Card 컴포넌트에서 props로 받아야하는 데이터는 id, name, email 입니다.
  props에서 해당하는 키값들을 추출하여 위와 같은 구조로 만들어주세요!

  이미지주소: `https://robohash.org/${숫자}?set=set2&size=180x180`
  카드마다 다른 이미지를 보여주기 위해
  위 주소의 숫자 부분을 props로 내려받은 id로 대체하셔야 합니다.

  Name 과 Email 도 마찬가지입니다.
***********************************************************/

class Card extends Component {
  render() {
    const { id, name, email } = this.props;
    return (
      <div className="card-container">
      //id를 넣기 위해 템플릿리터럴 사용
        <img src={`https://robohash.org/${id}?set=set2&size=180x180`} alt="" />
        <h2>{name}</h2>
        <p>{email}</p>
      </div>
    );
  }
}
export default Card;