[ReactJS] Input 창 입력에 따른 검색 기능 (Arrays.filter() 활용)

Input 창 입력에 따른 검색 기능 (Arrays.filter() 활용)

1시간 이내로 끝나버린 과제여서 난이도 설정이 조금 아쉬웠다. 그래도 이렇게 토이 프로젝트를 통해 배운 내용들을 복습 하니 너무 좋았다. 리액트라는 걸 활용해 이렇게 뭔가 만들어 냈다는 것이 너무나 뿌듯하고 좋았던 과제였다.

아래는 해당 과제의 핵심(?)인 검색 기능 !

import React, { useEffect, useRef, useState } 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')
      .then(response => response.json())
      .then(data => {
        setMonsters(data);
      });
  }, []);

  const handleInputChange = e => setUserInput(e.target.value);
  const filteredMonsters = monsters.filter(monster => monster.name.includes(userInput));

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

export default Monsters;

위 코드에서 검색 기능에 필요한 부분만 추출하면 아래와 같다.

const handleInputChange = e => setUserInput(e.target.value);
const filteredMonsters = monsters.filter(monster => monster.name.includes(userInput));

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

해설

• input 창의 입력을 state로 받아둔다.
• filteredMonsters라는 변수에 monster 네임에 userInput이 Includes된 놈들만 filtering한다. (Arrays.filter())활용
• CardList 컴포넌트에 userInput이 없으면 monsters를 전부 던져주고, userInput이 있으면 filteredMonsters를 던져 준다.

간단하게 끝 ! 🤣🤣
졸라 재밌당 ~ 🚀🚀
어려운 과제 주세요!!!!!!!!!!!