내가 했던 실수

Monster.js

1) useEffect()를 사용해서 Data 붙여주기

import React, { useState, useEffect } from "react";

const API = '[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)'
useEffect(() => {
		fetch(API, {
     method: "GET"
     })
		.then(response => response.json())
		.then(result => console.log("result :", result));

},[])

데이터가 잘 들어오는 지 확인 후, setState에 data를 넣어 주었다🔻

import React, { useState, useEffect } from "react";
const [ monsters, setMonsters ] = useState([]);

const API = '[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)'
useEffect(() => {
		fetch(API)
		.then(response => response.json())
		.then(result => setMonsters(result));

},[])

• 먼저 useEffect를 선언해주었다.
• const API를 선언하고, 주소를 할당해주었다
• useEffect (() ⇒ {}, []) : 인수로 콜백 함수와 빈 배열을 전달한 경우, 처음 컴포넌트가 렌더링이 된 이후 무조건 한번 호출이 되고 이후에는 호출되지 않는다. (읽어보면 좋은 블로그)

Monster.js를 하면서 알게 됐던 점

• method가 ‘GET’이면 설정을 생략할수 있다.

useEffect(() => {
		fetch(API)
		.then(response => response.json())
		.then(result => console.log("result :", result));

},[])

Monster.js에서 했던 실수

• Monster.js 에서는 데이터만 자식컴포넌트에 넘겨주면 되는데, 왜 map메서드를 돌렸다. 맵을 돌려야 자식컴포넌트에 값을 넘길 수 있다는 잘못된 생각을 했던 것 같다. CardList에서 card로 데이터를 넘기려고 했다. 당연히 오류가 떴다.
• 당연히 이미 맵을 돌린 상태니, cardList에서는 오브젝트{}로 들어온 상태이니 map이 안된다고 떴다.
• 에러 메시지에 “you may use Array” 라고 적혀있었다. 나는 값을 array로 받고 있는지 확인하니 object였다. 그래서 곰곰이 생각하다가, 아... 값만 넘겨주만 되니까, Monster.js에서는 map 돌릴 필요가 없다는 것을 깨달았다.

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

실수한 코드 🔻

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

다시 바꾼 코드 🔻

<div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <CardList monsters={monsters} />
    </div>

CardList.js

해결방안

• Monster.js(부모 컴포넌트)에서 받아온 data가 잘 들어오는지 먼저 확인부터 했다.
• console.log(props) ——> 콘솔로그로 확인하니 잘 들어오고 있었다.
• map함수를 돌렸고, 원하는 정보를 적어둠. key, id, name, email

function CardList({monsters}) {
  return <div className="cardList">
        {
          monsters.map(monster => 
             <Card key={monster.id} id={monster.id} name={monster.name} email={monster.email}/>)
        }
    </div>;
}

CardList.js하면서 알게된 점

• 부모 → 자식 컴포터는 props를 표현방식(?)이 다양한다.

ex)

첫번째 방법: props를 넘겨준다. props.monsters.map(monster → monster)

두번째 방법: props를 넘겨준다. const { monsters } = props로 사용한다. monsters.map

세번째 방법: function Cardlist({monsters}){} 로 받아온다. 이 방법이 코드를 간략하게 쓸 수 있어 유용하게 쓰일 것 같다!

function CardList({monsters}) {
  return <div className="cardList">
        {
          monsters.map(monster => 
             <Card key={monster.id} id={monster.id} name={monster.name} email={monster.email}/>)
        }
    </div>;
}

Card.js

function Card({ id, name, email}) {
  return (
  <div className="cardContainer">
     <img src={`https://robohash.org/${id}?set=set2&size=180x180`} alt="monster" />
	  <h2>{name}</h2>
	  <p>{email}</p>
  </div>
  )
}

Input에서 monster 이름을 찾기

const [userInput, setUserInput] = useState("");

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

  const serachMonster = monsters.filter(monster => 
      monster.name.toLowerCase().includes(userInput.toLowerCase())
  )

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

내가 했던 실수

• handleChange 함수 만들때 도대체 어떻게 해야할지 감도 안 잡혔다.

  • 먼저, input에 event,target.value 값을 받아야와겠다 라는 생각이 들었다.

  • setUserInput안에 받아온 값을 넣어주면 되겠다고 생각

    const handleChange = (event) => {
    		 setUserInput(event.target.value)
    }

• 그래...그렇다면 filter를 사용하라는 guideLine을 보고 정말 감이 잡히지 않아, 풀이 영상을 보았다.
  • 그렇구나. 그러고 저거를 어디에 선언해줘야 하는걸까? 고민을 했다.

const searchMonsters = monsters.filter(monster => 
	 return monster.name.toLowerCase().includes(userInput.toLowerCase())
)

잘못한 실수

• serachMonster과 Monsters를 동시게 넘겨줬다.
• 그렇게 생각했던 이유는 일단 monsters안에 있는 data를 넘겨줘야, searchMonster가 작동할거라고 생각했다.
• 풀이를 다시 보니, monsters={searchMonsters}로 바꿔준다.
• 왜일까 고민을 해보니, 사실 searchMonster에 이미 monster에서 넘겨준 함수가 포함된거다. 내가 Input에다가 무언가를 치지 않으면, 없는 상태의 모든 monster 데이터를 보여주는거고, input에 이름을 치면 조건에 맞는 데이터만 보여준다
• 개발자가 되어가는 과정이 어렵군요 ㅜㅜ

내가 실수한 코드

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

수정 코드

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