[React] Monster 과제

Task 1. API 호출

1. componentDidMount()
2. fetch() → 호출할 API 주소: https://jsonplaceholder.typicode.com/users
3. setState() → state 객체 내에 monsters 라는 key 값에 저장

componentDidMount() {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((res) => res.json())
    .then((res) => this.setState({ monsters: res }));
}

Task 2. API 호출의 결과값 props 로 자식에게 전달

1. API 호출 후 저장한 배열을 props를 활용하여 자식 컴포넌트인 <CardList /> 에 넘겨주기

<CardList monsters={this.state.monsters} />

Task 3. Array.map( ) 사용

1. 넘겨받은 배열을 기준으로 Array.map() 함수를 활용하여 <Card /> 컴포넌트를 리턴
2. Card.js 에게 넘겨줘야하는 props 는 각 몬스터 객체의 id, name, email

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

export default CardList;

Task 4. Props 사용

1. Card.js 컴포넌트 구조

   <div className="card-container">
   	<img src=이미지주소 alt="" />
   	<h2>Name</h2>
   	<p>Email</p>
   </div>

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="monsterCard" />
        <h2>{name}</h2>
        <p>{email}</p>
      </div>
    );
  }
}

export default Card;

Task 5. Array.filter() 사용

1. searchbox에 넘겨줄 handleChange 메소드 정의
2. Array.filter()함수를 활용하여 입력한 값이 포함된 카드가 나오도록<CardList />컴포넌트를 리턴

handleChange = (e) => {
    this.setState({
      userInput: e.target.value,
    });
  };

render() {
    const filterMonster = this.state.monsters.filter((monster) =>
      monster.name.toLowerCase().includes(this.state.userInput.toLowerCase())
    );
    return (
      <div className="Monsters">
        <SearchBox handleChange={this.handleChange} />
        <CardList monsters={filterMonster} />
      </div>
    );
  }
}