class200ok | Day 3

class형으로 되어있던 걸 함수형 컴포넌트로 바꾸는 연습을 했다.

근데 컴포넌트가 뜨지 않는다???

const getMonster = () => {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((res) => setMonsters({ res }));
  };

return (
    <div className="Monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      {/* <SearchBox handleChange=정의한메소드 /> */}
      <CardList monsters={monsters} />
    </div>
  );

위 코드가 상위 컴포넌트로 api에서 데이터를 받아 하위 컴포넌트로 전달한다.

function CardList({ monsters }) {
  // useEffect(() => {
  //   console.log("monsters");
  // }, []);
  console.log(monsters);
  return (
    <div className="card-list">
      {monsters[0] &&
        monsters.map((monstersList) => {
          return (
            <Card
              key={monstersList.id}
              id={monstersList.id}
              name={monstersList.name}
              email={monstersList.email}
            />
          );
        })}
    </div>
  );
}

여기까지는 내려왔는데 map을 돌리질 못한다.

계속 고민했는데 나 혼자서는 해결하기 어려워서 동기들과 함께 찾아봤다. 동기들과 이야기하며 발견한 에러가 내가 res를 객체로 넘겨주는 바람에 이걸 제대로 찾아가지 못한 것!
객체에서 값을 찾아 props로 전달이 되지 않았더라.

const getMonster = () => {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((res) => setMonsters(res));
  };

부모 컴포넌트의 코드를 위처럼 수정하니 자식 컴포넌트까지 전달이 잘 되었다 👏👏👏