REACT - MONSTERS

MONSTERS

• 지금까지 위코드 Precourse 와 Foundation 과정에서 익힌
  프로젝트를 진행하기 위해서 배운 지식들을 정리해보는 과제입니다.

• fetch 를 통해서 API 데이터를 받아와야 합니다.

• state 를 통해서 받아온 데이터를 저장해야 합니다.

• props 를 통해서 컴포넌트간에 데이터를 주고받을수 있어야 합니다.

• Monsters Component

function Monsters() {
 
 // fetch를 통해서 받아온 데이터를 저장할 state를 선언합니다.
 const [monsters, setMonsters] = useState([]);
 
 // 이후 filter를 통해서 몬스터를 필터링하기위한 
 // inputValue를 저장할 state를 선언합니다.
 const [userInput, setUserInput] = useState(“”);
 
 // 처음 렌더링될 때 데이터를 받아온 후에 중복 호출되지 않기위해서
 // 의존성배열 부분에 빈배열을 기입합니다.
 useEffect(() => {
   fetch(“https://jsonplaceholder.typicode.com/users”)
     .then((res) => res.json())
     .then((res) => {
       setMonsters(res);
     });
 }, []);
 
 // input에 onChange를 통해서 동작시킬 함수를 선언합니다.
 const handleChange = (event) => {
   setUserInput(event.target.value);
 };
 
 // API로 받아온 데이터 객체인 monsters를 filter 함수로 필터링한 결과값을
 // filteredMonsters변수에 담습니다.
 const filteredMonsters = monsters.filter((monster) => {
   return monster.name.toLowerCase().includes(userInput.toLowerCase());
 });
 
 return (
   <div className=“monsters”>
     <SearchBox handleChange={handleChange}

     // 필터링된 monsters객체를 props로 받습니다.
     <CardList monsters={filteredMonsters} />
   </div>
 );
}
export default Monsters;

---

• SearchBox Component

// Monsters Component에서 handleChange라는 이름으로 넘겨준 함수를 props로 받습니다.          
function SearchBox(props) {
 return (
   <input
     className=“search”
     type=“search”
     placeholder=“Search...”
 
     // props로 받은 함수를 onChange로 사용합니다.
     onChange={props.handleChange}
   />
 );
}
export default SearchBox;

---

• CardList Component

// Monsters Component에서 monsters라는 이름으로 넘겨준 객체를 props로 받습니다.
function CardList({ monsters }) {
 return (
   <div className=“cardList”>

     // 받아온 props를 (props)가 아닌 ({monsters})로 받아왔기 때문에
     // props.monsters처럼 셀렉터 없이 사용할 수 있습니다.
     // monsters객체를 map함수를 이용해서 Card Component로 맵핑합니다.
     {monsters.map((monster) => (
       <Card
         key={monster.id}
         id={monster.id}
         name={monster.name}
         email={monster.email}
       />
     ))}
   </div>
 );
}
export default CardList;

---

• Card Component

// CardList Component에서 넘겨준 {id,name,email}을 
// props부분에서 바로 구조분해할당합니다.
function Card({ id, name, email }) {
 return (
   <div className=“cardContainer”>
     <img
           
       // 이미지 주소를 템플릿리터럴을 사용해서 
       // 받아온 id를 통해서 이미지를 다르게 로딩할 수 있게합니다.
       src={`https://robohash.org/${id}?set=set2&size=180x180`}
      alt=“monster”
     />
     <h2>{name}</h2>
     <p>{email}</p>
   </div>
 );
}
export default Card;

---

기본화면

필터링된 화면

---

마치며..

딱 한달전에 자신만만하게 자바스크립트 문법을 익히고 위코드에 들어왔던 내가
보잘것 없게 느껴질만큼 한달간 몰입하며 배운 지식과 기술이 상당하다는걸
이번 Monsters를 직접 해보고 느꼈다.

물론 앞으로 배워야 할 것들이나 숙련되야할 부분들이 산더미겠지만
Monsters를 풀어보며
다음주에 시작될 1차 프로젝트에 앞서서 간단하게 정리되는 느낌이었다.