TIL_컴포넌트 재사용 연습

이고운·2022년 8월 27일

1. 컴포넌트 재사용 연습 ➡️ 몬스터카드 만들어서 연습하기

< 조건 >

각 컴포넌트를 연결하여 메인페이지에 몬스터카드 나오게 하기

몬스터 정보는 fetch를 이용해 가져오기

props를 사용해 데이터 자식 컴포넌트에 데이터 전달하기

Array.filer(), Array.map() 사용하기

(1) Monsters.js에 몬스터 정보 가져오기

const [monsters, setMonsters] = useState([]);

// useEffect,fetch 이용하여 몬스터 정보가져와서 useState에 담아주기
useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/users")
   .then((res) => res.json())
   .then((monsters) => setMonsters(monster))
   
return (
<div className="monsters">
   <h1>컴포넌트 재사용 연습!</h1>
   <Cardlist monsters={monsters} /> //몬스터 정보를 cardlist컴포넌트에 넘겨줌
</div>
)}

(2) props로 넘겨받은 데이터에 map함수를 호출해 각기 다른 데이터를 가진 Card 컴포넌트를 리턴하기

(이 때 필요한 데이터는 id, name, eamil)

function CardList({monsters}) { 
  return (
  
  // function CardList(props)
  // console.log(props) 찍어서 데이터 가져오는지 확인하기
  
  {monsters.map((monster) => { //monster인자를 넣어서 map함수 돌려주기 그리고 Card컴포넌트 리턴 (필요한 값 넘겨주기)
    return (
    <Card key={monsters.id} //key값 필수
          id={monsters.id}
          name={monsters.name}
          email={monsters.email}
  )}

(3) Card 컴포넌트에서 props로 데이터 받고 이미지 넣어주기

function Card({ id, name, eamil}) { //넘겨준 데이터 받기
 return (
  <img 
    src={`https://robohash.org/${id}?set=set2&size=180x180`} // 아이디값에 따라 달라지는 이미지 주소 가져오기
    alt="monster" />
  <h2>{name} </h2> //받은 이름, 이메일 넣어주기
  <p>{email}</p>
    
 )}

➡️ 여기까지하면 몬스터 카드 완성 됨.
추가로 검색창에 몬스터 이름 검색하면 이에 맞는 몬스터 카드만 나오도록 만들 것임.

2. 몬스터 카드에 검색창 만들기

function Monsters() {
 const [monsters, setMonsters] = userState([])
 const [userInput, setUserInput] = userState("")
 
 // 이벤트 객체로 setState저장하는 함수 만들기
 const updateInput = (e) => {
   setUserInput(e.target.value) //함수 만들고 handleChange에 저장해주기
   
return (
 <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <SearchBox handleChange={updateInput} />
      <CardList monsters={filteredMonsters} /> *
) }

(2) filter 메소드 이용하여 검색한 몬스터만 나오는 기능 구현하기

// 검색한 몬스터의 이름이 포함된 값을 뽑아서 리턴하는 함수 만들기
비교대상은 몬스터 이름과 검색 input 값
const filteredMonsters = monsters.filter((monster) => {
 return monster.name.includes(userInput);
 
 return (
 <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <SearchBox handleChange={updateInput} />
      <CardList monsters={filteredMonsters} /> // 위에 만든몬스터 이름 검색하여 나오는 몬스터를 뽑아주는 함수를 CardList 컴포넌트에 저장하기 -> 이러면 맞는 몬스터 카드만 나오게 됨.
) }

➡️ 그런데 이렇게 되면 검색할 때 소문자 포함된 몬스터 값들 나옴.
이름이랑 인풋값을 소문자로 바꿔주는 함수를 넣어서 검색 필터 함수 만들어야함.


//소문자로 바꿔주는 toLowerCase 메소드 이용
 const filteredMonsters = monsters.filter((monster) => {
   return monster.name.toLowerCase().includes(userInput.toLowerCase());
 });

<메인 몬스터 카드 화면>