Monster?

• Monster는 react의 state,props를 연습할 수 있는 과제이다.
• Monster의 여러 component의 state와 props를 이용하여 화면에 Monster card를 여러개 rendering한다.
• 아래에 여러개의 monster 카드가 똑같은 구조로 더 rendering된다.

Components

• components는 다음과 같다.
  • Card
  • CardList
  • SearchBox
  • Monster

Card

• 위의 화면중 몬스터 카드 하나에 대한 컴포넌트이다.
• 위 카드의 구성요소를 크게 3가지로 나눌 수 있다.
  • 몬스터 그림(이미지)
  • 몬스터 이름
  • 몬스터 이메일
• 각 그림, 이름, 이메일에 대해 부모 컴포넌트에게 props를 전달하기 위해서 id, name, email을 props로 설정해준다.

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

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

export default Card;

TIP)

• props를 매개변수로 가져올 때 구조분해할당을 이용하여 인자란에 바로 객체로 풀어써줄 수 있다.
• ex) props를 id, name, email로 설정하고 싶으면 인자란에 props를 넣고 props.id, props.name, props.email 쓰는 대신 props 인자란에 바로 {id, name, email}을 넣으면 props로 id,name,email바로 쓸 수 있다.
• props가 많을 경우 인자에는 props를 써주고 함수 statement 안에서 구조분해할당을 해주는 방법이 좋다.
• 이 방법은 배열의 map method에 대해서도 똑같이 적용할 수 있다.

CardList

• CardList 컴포넌트는 카드를 묶어놓은 컴포넌트라고 생각하면 된다.
• Card의 부모컴포넌트이자 Monster의 자식컴포넌트이다.
• Card 컴포넌트를 반복할 것이기 때문에 map을 써준다.
• map을 적용할 data를 Monster에게서 받아오기 위해서 monster props를 설정해준다.
• react의 map은 반드시 key를 필요로 한다. 이유(React 홈페이지) 따라서 Card의 id props를 key로 받아온다.(통상적)
• 자식인 Card 컴포넌트에게 데이터를 넘겨주기 위해서 Card를 import한다.
• CardList가 받는 데이터인 monster의 id, name, email 데이터를 자식인 Card의 props를 통해 전달한다. ex) data의 id => Card의 id props

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

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

export default CardList;

SearchBox

• SearchBox 컴포넌트는 화면상 상단 중앙의 검색창을 하나의 UI로 나타낸 컴포넌트이다.
• Monster 컴포넌트의 자식컴포넌트가 되며 input의 onChange이벤트의 변수에handleChange props를 저장하여 부모로부터 handleChange method를 받아온다.

import React from "react";
import "./SearchBox.scss";

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

export default SearchBox;

Monster

• CardList와 SearchBox의 props에 각각 해당하는 method를 넘겨준다.
• SearchBox의 handleChange props에는 input의 value값을 받아오는 메소드를 넘겨준다.
  • useState을 통하여 Input의 초기값과 setInput 함수 정의
  • handleChange 함수 정의를 통하여 input값을 받아온다.
• CardList의 monster props에 전달할 데이터는 useEffect의 fetch 함수를 통해 가져온다.
  • useState을 통해 monster data의 초기값과 setMonster함수를 먼저 정의!
• fetch로 받아온 monster data를 filter를 활용하여 함수를 정의하고 CardList의 props로 넘겨준다.

필터링 로직 구현!!!! (filter method 활용)

const sortedMonsters = monsters.filter((monster) => {
    return monster.name.toLowerCase().includes(userInput.toLowerCase());
  });

• SearchBox에 값을 입력하였을 시 해당 값을 가진 Monster의 이름을 추출하는 함수를 정의하였다.
• 대소문자를 가리면 안되기 때문에 .toLowerCase를 활용하였다.
• CardList의 props에 전달할 데이터이다.

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

function Monsters() {
  const [monsters, setMonsters] = useState([]);
  const [userInput, setUserInput] = useState("");

  // 데이터 로딩
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users") // (1)
      .then(res => res.json())     // (2)
      .then(res => setMonsters(res))  // (3)
    }, [])
    
  // SearchBox의 props로 넘겨줄 handleChange 메소드 정의
  const handleSearchBox = e => {
    setUserInput(e.target.value);
  }

  // CardList의 props로 넘겨줄 filter를 홣용한 monsterdata sortedMonster 메소드 정의
  const sortedMonsters = monsters.filter((monster) => {
    return monster.name.toLowerCase().includes(userInput.toLowerCase());
  });

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

export default Monsters;

🌈 Monster를 하면서.....

확실히 헷갈렸던 props 및 자식부모컴포넌트를 이해하는데 많은 도움이 되었다.
자식 컴포넌트의 props를 통해 부모 컴포넌트의 state 및 데이터를 넘겨주는 방법(이벤트까지)에 대해서 많이 익숙해진 것 같다.
props를 잘 활용하기 위해서는 자식 부모 컴포넌트의 관계파악 및 설정부터 확실히 알고 있는게 중요한 것 같다.
Filter를 활용한 monster 함수를 정의하는 것에서 많이 애를 먹었다. filter가 아직 익숙하지 않아서 그런것 같다.
React의 컴포넌트를 다루는 방법에 대해서는 state, props말고도 더 배울 것이 많다. 추후 블로그를 통해 또 정리할 예정이다.