조건에 맞는 항목 나타나게 하기

코드

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

function Monsters() {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => setMonsters(data));
  }, []);

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

  return (
    <div className="monsters">
      <SearchBox />
      <CardList monsters={monsters} />
    </div>
  );
}

export default Monsters;

코드 결과물

input에서 검색 시 일치하는 카드를 등장시키자!

1단계) input에서 value를 가져오자

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

function Monsters() {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => setMonsters(data));
  }, []);

  const [monsters, setMonsters] = useState([]);
  const [userInput, setUserInput] = useState(''); // input state 설정

  const updateUserInput = (e) => {
    setUserInput(e.target.value); // input value
  };

  return (
    <div className="monsters">
      <SearchBox handleChange={updateUserInput} />
      <CardList monsters={monsters} />
    </div>
  );
}

export default Monsters;

• 먼저 input에서 value를 가져와야 하므로 userInput state를 만든다
• updateUserInput이라는 함수를 만들고 가져온 value를 setUserInput을 통해 userInput에 넣는다.
  
  

2단계) filter와 inCludes를 활용해 걸러내자

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

function Monsters() {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => setMonsters(data));
  }, []);

  const [monsters, setMonsters] = useState([]);
  const [userInput, setUserInput] = useState('');

  const updateUserInput = (e) => {
    setUserInput(e.target.value);
  };

  const sortedMonster = monsters.filter((monster) => {
    return monster.name.includes(userInput); // filter & Includes 함수 활용
  });

  return (
    <div className="monsters">
      <SearchBox handleChange={updateUserInput} />
      <CardList monsters={sortedMonster} /> // 검색 결과를 prop으로 전달
    </div>
  );
}

export default Monsters;

• filter와 includes를 이용해 검색 value가 갖고있는 monster의 name과 일치하는지 확인한다.
• 나온 결과 값은 sortedMonster에 넣어주고 CardList에 prop으로 전달해서 일치하는 값만 보여지게 한다.
  
  

3단계) 검색이 심플하게 모두 소문자로 만든다

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

function Monsters() {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => setMonsters(data));
  }, []);

  const [monsters, setMonsters] = useState([]);
  const [userInput, setUserInput] = useState('');

  const updateUserInput = (e) => {
    setUserInput(e.target.value);
  };

  const sortedMonster = monsters.filter((monster) => {
    return monster.name.toLowerCase().includes(userInput.toLowerCase());
  });    // toLowerCase() 활용

  return (
    <div className="monsters">
      <SearchBox handleChange={updateUserInput} />
      <CardList monsters={sortedMonster} />
    </div>
  );
}

export default Monsters;

• 하지만 대소문자까지 일치해야 원하는 결과를 볼 수 있는 문제가 있다.
• 그러므로 input으로 들어오는 값과 갖고있는 Data에 name을 모두 소문자로 통일시켜주기 위해 toLowerCase()를 활용한다.
  
  

결과