🚀 학습 목표

1. useEffect()훅을 통해 data fetching 등 컴포넌트 렌더링 이후 필요한 다양한 side effect(부수효과)를 일으킬 수 있다.
2. fetch() 함수를 사용해 API 호출을 할 수 있다.
3. Array.map() 함수를 통해 component를 재활용할 수 있다.
4. props 를 사용해 단방향(부모 컴포넌트 > 자식 컴포넌트)으로 데이터를 전달할 수 있다.
5. Array.filter() 를 통한 검색기능을 구현할 수 있다. (Optional!)

🔴몬스터 카드 나열된 화면 구현 먼저해보기!(완성화면)

✔️Monster.js

import React, { useState, useEffect } from "react"; ========> useEffect 추가
import SearchBox from "./Components/SearchBox/SearchBox";
import CardList from "./Components/CardList/CardList";
import "./Monsters.scss";

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

  1. 위 주소를 호출하여 데이터 로딩을 처리해주세요!
    - useEffect()
    - fetch
    - setState (monsters 에 저장)

  2. SearchBox 컴포넌트에 정의한 handleChange 메소드를 넘겨주고, 
     호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput 으로 setState.

  3. 필터링 로직 구현 (filter 메소드 활용)
      여기서 비교 대상은 monster 객체의 name 값입니다.
      소문자로 바꾼 monster.name 값과 userInput값을 비교.
      filter 메소드가 반환하는 값을 변수에 저장 후 return 문 안에 CardList에 props로 전달
***********************************************************/

function Monsters() {
  const [monsters, setMonsters] = useState([]); //초기값 빈배열
  const [userInput, setUserInput] = useState("");

  // 데이터 로딩
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET",
    })
      .then((res) => res.json()) //데이터 변환
      .then((result) => setMonsters(result)); //받아온 데이터를 저장. 
      setMonsters 입력 전에 console.log(result)로 확인 해보기=>array값 10개 확인 완.
  }, []); //data fetch를 렌더링이 일어난 이후 단 한번만 진행하기 때문에 빈 배열에 담음

	//console.log(monsters)로 저장이 잘 되었는지 확인하기 => 빈 배열과 10개의 객체 담긴것 확인 완.

  // SearchBox 에 props로 넘겨줄 handleChange 메소드 정의

  return (
    <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      {/* <SearchBox handleChange=정의한메소드 /> */}
      <CardList monsters={monsters} /> //monsters라는 props name으로 {monsters} 상태값을 전달.
    </div>
  );
}

export default Monsters;

✔️CardList.js

import React from "react";
import Monsters from "../../Monsters";
// import Monsters from "../../Monsters";
import Card from "../Card/Card";
import "./CardList.scss";

/***********************************************************
  Card 컴포넌트를 import 한 뒤, props로 내려받은 데이터에 
  map 함수를 호출해 각각 다른 데이터를 가진 Card 컴포넌트들을 리턴해주세요!
  Card 컴포넌트에서 필요로 하는 데이터는 id, name, email 입니다.
***********************************************************/

function CardList({ monsters }) { // 구조분해할당
 //console.log(monsters)===> 콘솔 찍어보면 객체안에 id,name,email 찍힘
  return (
    <div className="cardList">
      {monsters.map((monster) => { //map함수엔 key값이 무조건 들어가야함!
        return (
          <Card
            key={monster.id}
            id={monster.id}
            name={monster.name}
            email={monster.email} // Card
          />
        );
      })}
    </div>
  );
}

export default CardList;

import React 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 도 마찬가지입니다.
***********************************************************/

function Card({ id, name, email }) { //구조분해할당
	// return문 안에 코드 치기전에 console.log(props) 찍어서 확인해보기!!
  return (
    <div className="cardContainer">
      <img
        src={`https://robohash.org/${id}?set=set2&size=180x180`} //각각의 id props를 전달함
        alt="monster"
      />
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

export default Card;

🔴filter 사용하여 검색 기능 구현

✔️Monster.js

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

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

  1. 위 주소를 호출하여 데이터 로딩을 처리해주세요!
    - useEffect()
    - fetch
    - setState (monsters 에 저장)

  2. SearchBox 컴포넌트에 정의한 handleChange 메소드를 넘겨주고, 
     호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput 으로 setState.

  3. 필터링 로직 구현 (filter 메소드 활용)
      여기서 비교 대상은 monster 객체의 name 값입니다.
      소문자로 바꾼 monster.name 값과 userInput값을 비교.
      filter 메소드가 반환하는 값을 변수에 저장 후 return 문 안에 CardList에 props로 전달
***********************************************************/

function Monsters() {
  const [monsters, setMonsters] = useState([]); //초기값 빈배열
  const [userInput, setUserInput] = useState("");

  // 데이터 로딩
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET",
    })
      .then((res) => res.json()) //데이터 변환
      .then((result) => setMonsters(result)); //받아온 데이터를 저장
  }, []);

 ✨ // SearchBox 에 props로 넘겨줄 handleChange 메소드 정의
  const handleChange = (e) => {
    setUserInput(e.target.value);
  };
  //console.log(userInput);===> 콘솔 확인 완. (state에 입력값이 잘 찍힌다.)

//filter 메소드가 반환하는 값을 변수에 저장 후 return 문 안에 CardList에 props로 전달

  return (
    <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <SearchBox handleChange={handleChange} />
      <CardList monsters={monsters} />
    </div>
  );
}

function Monsters() {
  const [monsters, setMonsters] = useState([]); //초기값 빈배열
  const [userInput, setUserInput] = useState("");

  // 데이터 로딩
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET",
    })
      .then((res) => res.json()) //데이터 변환
      .then((result) => setMonsters(result)); //받아온 데이터를 저장
  }, []);

  // SearchBox 에 props로 넘겨줄 handleChange 메소드 정의
  const updateUserInput = (e) => {
    setUserInput(e.target.value);
  };

//filter 메소드를 사용하여 소문자로 입력시에도 해당 몬스터 반환해주는 함수
  const sorterMonsters = monsters.filter((monster) => {
    return monster.name.toLowerCase().includes(userInput.toLowerCase());
  });

  return (
    <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <SearchBox handleChange={updateUserInput} /> // 해당데이터를 가지고 있는 변수를 전달. SearchBox의 handleChange의 속성명으로 updateUserInput를 전달.
      <CardList monsters={sorterMonsters} /> // 해당데이터를 가지고 있는 변수를 전달. 
      CardList의 monsters의 속성명으로 sorterMonsters을 전달
    </div>
  );
}

export default Monsters;