[Monster과제]

Task 1. API 호출

- 파일: `Monsters.js`
- 아래 키워드들을 활용해 데이터 로딩을 처리해주세요!
1. `componentDidMount()`
2. `fetch()` → 호출할 API 주소: (https://jsonplaceholder.typicode.com/users)
3. `setState()` → state 객체 내에 `monsters` 라는 key 값에 저장

---

componentDidMount() {
	fetch('https://jsonplaceholder.typicode.com/users')
  	.then(response => response.json())
  	.then(response => this.setState({monsters:data}))
}

---

첫번째 .then은 json파일을 JS로 바꾸는 역할
두번째 .then은 로직을 처리하는 부분

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

- 파일: `Monsters.js`
1.
- API 호출 후 저장한 배열을 자식 컴포넌트인 `<CardList />` 에 넘겨주세요.
   (props 활용)
- 넘겨준 후 `CardList.js` 에서 props 를 콘솔에 찍어 확인해주세요. 
(개발 단계에서 확인하는 용도이니 확인 완료 후 push 하기 전에는 지워주세요!)
2.
- SearchBox 컴포넌트에 정의한 handleChange 메소드를 넘겨주고, 
 호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput 으로 setState.
3. 필터링 로직 구현 (filter 메소드 활용)
- 여기서 비교 대상은 monster 객체의 name 값입니다.
- 소문자로 바꾼 monster.name 값과 userInput값을 비교.
- filter 메소드가 반환하는 값을 변수에 저장 후 return 문 안에 CardList에 props로 전달

---

	handleChange = (e) => {
	 this.setState({
 	   userInput: e.target.value,
	  });
 	};
	render() {
	  const { monsters, userInput } = this.state;
	  const filteredMonster = monsters.filter(monster =>
       monster.name.toLowercase().includes(userInut.toLowercase()))
	  return(
	<SearchBox handleChange={this.handleChange} />
	<CardList monsters={filteredMonster} />
	)
	}

---

1. CardList 컴포넌트에 monsters를 props로 전달
2. SearchBox 컴포넌트에 handleChange 메소드를 props로 전달.
3. filter 메소드활용
   • monster라는 객체의 name이라는 값을 소문자로 바꾸는 함수적용
   • userInput값 비교를 위해 includes 메소드활용
   • filter 메소드가 반환하는 값을 filteredmonster라는 변수에 저장
   • 저장 후, 기존에 있던 CarList 컴포넌트의 monsters 대신 filteredmonster를 props로 전달
4. 구조분해할당 적용

Task 3. Array.map( ) 사용

- 파일: `CardList.js`
- 🚨 `Array.map()` 함수 사용법을 꼭 익히고 시작해주세요!
- 넘겨받은 배열을 기준으로 `Array.map()` 함수를 활용하여 `<Card />` 컴포넌트를 리턴해주세요.
- `Card.js` 에게 넘겨줘야하는 props 는 각 몬스터 객체의 `id`, `name`, `email` 입니다.

---

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

---

Monster.js에서 props로 받은 monsters배열에 map 함수를 사용하여 <Card>컴포넌트 리턴

• 여기서 monsters를 굳이 구조분해할당 하지 않음.!

Task 4. props 활용

- Card.js 컴포넌트 모양 및 구조

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

- 이미지 주소(src)
`https://robohash.org/숫자?set=set2&size=180x180`
카드마다 다른 이미지를 보여주기 위해 위 주소의 `숫자` 부분을 props 로 내려받은 `id` 로 대체해주세요.

---

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

---

1. 구조분해할당 적용
2. img 주소에 숫자부분을 props로 넘겨 받아야 하여, 템플릿리터럴 사용.
   • 템플릿리터럴을 사용했기 때문에 props 값을 넣어줄 수가 있음
   • 숫자 부분에 자바스크립트 ${}를 씀