[React] 카드 컴포넌트 검색기능 구현

Test 용도로 임시로 만들었기 때문에 완성되지 않았다.

커서가 있는 input 창에 검색어를 입력하면   

카드의 본문의 내용중에 해당 키워드를 포함한 카드만 필터링해준다.

(엔터나 버튼을 누를 필요 없이, 키워드의 변화(onChange)를 감지하여 즉각 필터링해준다)

 

// Search.tsx

import React, { useState, useEffect } from "react";
import Poster from "./Poster";
import "./Search.scss";

function Search() {
  const [userInput, setUserInput] = useState("");

  // 입력값을 가져와서 소문자로변경 및 통일한다.
  const getValue = (e: any) => {
    setUserInput(e.target.value.toLowerCase());
  };

  // 데이터들을 배열로 posters 에 배열 state로 저장해놓는다.
  const [posters, setPosters] = useState([]);

  const test = () => {
    console.log(userInput);
  };

  // 데이터 목록중, name에 사용자 입력값이 있는 데이터만 불러오기
  // 사용자 입력값을 소문자로 변경해주었기 때문에 데이터도 소문자로 통일한다.
  const searched = posters.filter((item: any) =>
    item.name.toLowerCase().includes(userInput)
  );

  useEffect(() => {
    const getComments = async () => {
      const res = await fetch(
        `https://jsonplaceholder.typicode.com/comments?_limit=100`
      );
      const data = await res.json();
      setPosters(data);
    };
    getComments();
  }, []);

  return (
    <div>
      <button type="button" onClick={test}>
        클릭시 입력값 console 확인
      </button>
      <input onChange={getValue} />
      <div className="container">
        {searched.map((item: any) => (
          <Poster key={item.id} item={item} />
        ))}
      </div>
    </div>
  );
}

export default Search;

 

// Poster.jsx

import * as React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Typography from "@mui/material/Typography";
import posterSample from "assets/images/posterSample.png";

/* eslint-disable react/prop-types */
function Poster({ item: { id, email, body } }) {
  return (
    <Card id="card" sx={{ width: 200, height: 500, padding: 0, marginTop: 3 }}>
      <CardMedia
        component="img"
        height="200"
        image={posterSample}
        alt="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {id}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {email}
          <br />
          {body}
        </Typography>
      </CardContent>
    </Card>
  );
}
export default Poster;

 

search 컴포넌트를 만든 후 사용하고자 하는 메인 컴포넌트에서 import 후 사용했다.