구현 목표

1. componentDidMount() 메소드를 통해 라이프 사이클에 대한 이해를 높인다.
2. fetch() 함수를 사용해 API 호출을 할 수 있다.
3. Array.map() 함수를 통해 component를 재활용할 수 있다.
4. props 를 사용해 단방향(부모 컴포넌트 > 자식 컴포넌트)으로 데이터를 전달할 수 있다.
5. Array.filter() 를 통한 검색기능을 구현할 수 있다.

---

Monster.js 코드

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

class Monsters extends Component {
  state = {
    monsters: [],
    userInput: "",
  };
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((result) => {
        this.setState({
          monsters: result,
        });
      });
  }

  // SearchBox 에 props로 넘겨줄 handleChange 메소드 정의
  handleChange = (e) => {
    this.setState({
      userInput: e.target.value,
    });
  };

  render() {
    const filterMonster = this.state.monsters.filter((monster) => {
      return monster.name
        .toLowerCase()
        .includes(this.state.userInput.toLowerCase());
    });
    return (
      <div className="Monsters">
        <h1>컴포넌트 재사용 연습!</h1>
        <SearchBox handleChange={this.handleChange} />
        <CardList filterMonster={filterMonster} />
      </div>
    );
  }
}

export default Monsters;

• monsters: [] 와 userInput: ""를 state로 만들어 둡니다
• componentDidMount() 에 fetch로 API 주소로 데이터를 받아와
  monsters 빈배열에 넣어줍니다.
• handleChange()를 만들어 SearchBox컴포넌트에서 입력되는 값을 userInput에 저장해줍니다.
• filter()를이용해 monsters에 있는 name 이라는 key 값을
  소문자로 변환한후 userInput에 들어오는 값들만 반환해줍니다.

SearchBox.js 코드

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}
      />
    );
  }
}

export default SearchBox;

-input창에 onChange 이벤트를 넣어주어 monster.js에서 props로 보내준 handleChange함수에 입력되는 값을 넣어줍니다.

CardList.js 코드

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

class CardList extends Component {
  render() {
    return (
      <div className="card-list">
        {this.props.filterMonster.map((content) => {
          return (
            <Card
              id={content.id}
              name={content.name}
              email={content.email}
              key={content.id}
            />
          );
        })}
      </div>
    );
  }
}

• Card컴포넌트가 데이터안에 있는 id 만큼 여러개가 만들어져야하기 때문에 map함수를 적용 시켜 줍니다.

Card.js 코드

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

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

export default Card;

• 부모에서props로 받아온 값들을 맞는 위치에 넣어줍니다.