[React][TypeScript] useState 리스트 필터링 및 삭제

필터링 방법

import React, { useState } from 'react';

//타입 인터페이스 지정
interface Item = {
  id: number;
  name: string;
};

const Example: React.FC = () => {
  // 예시 데이터 생성
  const [items, setItems] = useState<Item[]>([
    { id: 1, name: 'apple' },
    { id: 2, name: 'banana' },
    { id: 3, name: 'orange' },
  ]);

  //필터링 된 아이템을 저장해줄 useState
  const [filteredItems, setFilteredItems] = useState<Item[]>(items);
  //필터링 기능
  const handleFilter = (searchTerm: string) => {
    const filtered = items.filter(item =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredItems(filtered);
  };

  return (
    <div>
      <input type="text" onChange={(e) => handleFilter(e.target.value)} />
      <ul>
        {filteredItems.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

삭제 방법

import React, { useState } from 'react';

//타입 인터페이스 지정
inteface Item = {
  id: number;
  name: string;
};

const Example: React.FC = () => {
 // 예시 데이터 생성
  const [items, setItems] = useState<Item[]>([
    { id: 1, name: 'apple' },
    { id: 2, name: 'banana' },
    { id: 3, name: 'orange' },
  ]);
  // 중복 리스트 삭제 기능
  const uniqueItems = Array.from(new Set(items.map((item) => item.name)))
    .map((name) => {
      return items.find((item) => item.name === name);
    })
    .filter(Boolean);

  return (
    <div>
      <ul>
        {uniqueItems.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};