state,props,useEffect를 이용해서 카드를 움직여보자! (monster)

김인태·2022년 6월 18일

React monster

본격적인 프로젝트 들어가기 전에 react에서 가장 기초적이고 중요한 state, props, useEffect를 이용해서 간단한 미션을 해보고자 했다!

💥 미션은 이러합니다

위의 미션을 성공하면 아래 사진과 같은 결과물이 나옵니다.
input에다가 카드에 해당하는 이름을 쓰면 카드가 나옵니다!

초기 코드

Monsters.js

CardList.js

Card.js

해당 컴포넌트에 주석으로 팔요한 조건들이 적혀 있었습니다.

첫번째 미션

useEffect와 fetch 메소드를 이용해서 카드에 id,name,email을 가져다줄 API를 호출해보겠습니다.

useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users") ->해당 URL
      .then((response) => response.json())
      .then((response) => setMonsters(response));
  }, []);
  //Monsters의 state에 저장해주기 위해서 setMonster(reponse)에 API에서 받아온 정보들을 저장했습니다

두번째 미션

API 호출의 결과값을 props로 자식에게 전달해보겠습니다.

Monsters.js

<div className="monsters">
      <h1>Monster</h1>
      {/* <SearchBox handleChange=정의한메소드 /> */>
      {/* <CardList monsters=몬스터리스트 /> */}
      <CardList monsters={monsters} />;
      //CardList.js에서 아까 저장한 정보를 기반으로 map함수를 쓰기위해서 monster라는 state를 props로 넘겨줬습니다.
    </div>

CardList.js

unction CardList({ monsters }) { 
//구조분해할당으로 필요한 props인 monster를 가져다 썼습니다.
  return (
    <div className="cardList">
    //가져온 monsters로 map함수를 사용해서 Card component에 정보를 전달하면서 동시에 반복했습니다.
    //참고 : map메소드는 배열내의 모든 요소에 각각에 대하여 함수를 호출한 결과를 모아서 새로운 배열로 반환함.
      {monsters.map((ele) => {
        return <Card id={ele.id} name={ele.name} email={ele.email} />;
      })}
    </div>
  );

Card.js

function Card({ id, name, email }) {
//Cardlist에서 반복한 컴포넌트인 Card 컴포넌트는 이러한 구조입니다.
  return (
    <>
      <div className="cardContainer">
        <img
          src={`https://robohash.org/${id}?set=set2&size=180x180`}
          alt="monster"
        />
        <h2>{name}</h2>
        <p>{email}</p>
      </div>
    </>
  );
}

입력하면 짜잔! 😸 다음과 같은 결과가 나옵니다!

세번째 미션

filter()를 사용해서 검색 기능을 만들어 보자!

Monsters.js

  const handleChange = (e) => {
    const { value } = e.target;
    //구조분해 할당으로 event.target에 있는 value를 가져다 썼다
    //저렇게 쓰는 이유는 ex)e.target이 input이다? 그러면 그 해당 요소에 있는 속성들을 사용할 수 있기 떄문에! 
    //name을 쓰고 싶다면 const {value, name} = e.target 이런식으로 사용할 수 있습니다!
    setUserInput(value);
    //input에 들어가는 데이터를 저장해주었습니다.
  };
  
  const filtering = monsters.filter((monsters) => {
    return monsters.name.toLowerCase().includes(userInput.toLowerCase());
  });
  //검색했을 떄 검색창에 있는 정보와 monsters에 있는 n![](https://velog.velcdn.com/images/carloskim/post/92c9ebe1-369a-4bd4-827c-aaa5bf8f30b7/image.PNG)
ame을 비교해서 같은 것만 rendering  될 수 있도록 만들어 봤습니다.
//참고 : filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환합니다!

SearchBox.js

function SearchBox({ handleChange }) {
  return (
    <input
      className="search"
      type="search"
      placeholder="Search..."
      onChange={handleChange}
    />
  );