React로 검색 필터 구현

핵심 개념

useState로 검색어를 관리하고 filter()로 실시간 필터링합니다. controlled input으로 검색창을 제어하고, useMemo로 필터링 결과를 최적화합니다. 검색 코드를 지우며 필터링 시스템이 어떻게 붕괴되는지 확인하십시오.

코드 분석

REACT📋 코드 (23줄)







const { useState, useMemo } = React;
  const UNITS = ['T-800','T-1000','T-X','T-600','T-3000','SKYNET','CYBERDYNE','HK-TANK'];

  function SearchFilter() {
    const [query, setQuery] = useState('');
    const results = useMemo(() => UNITS.filter(u => u.toLowerCase().includes(query.toLowerCase())), [query]);
    return (
      <div>
        <input value={query} onChange={e => setQuery(e.target.value)} placeholder='UNIT 검색...' style={{width:'100%', background:'#1a1a1a', color:'#e8e8e8', border:'1px solid #10b98144', padding:'8px', fontFamily:'monospace', marginBottom:'8px', boxSizing:'border-box'}} />
        <div style={{fontSize:'11px', color:'#555', marginBottom:'8px'}}>{results.length}개 검색됨</div>
        {results.map(u => <div key={u} style={{color:'#10b981', marginBottom:'4px', fontSize:'12px'}}>▶ {u}</div>)}
        {results.length === 0 && <div style={{color:'#333'}}>NO TARGET FOUND</div>}
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<SearchFilter />);

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 React '검색 필터' 컴포넌트에서
불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고
최적화 코드로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'검색 필터'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 React '검색 필터' 사용 패턴 전체를 분석하고
번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을
우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React '검색 필터' vs 다른 프레임워크(Vue/Svelte/Solid)의
동일 기능 구현 방식을 솔직하게 비교하고
2026년 트렌드를 알려줘.

⭐ 이것만 기억하세요

React로 검색 필터 구현은 이 3가지만 확실히 잡으세요

1.입력할 때마다 전체 목록을 필터링하면 데이터가 많을 때 타이핑 지연이 체감됩니다

2.디바운스로 입력 완료 시점을 감지하고, filter()로 조건에 맞는 항목만 추출해서 렌더링하는 것이 핵심입니다

3.다음 챕터에서 스크롤 끝에서 데이터를 자동으로 불러오는 무한 스크롤을 구현합니다

💬 이 챕터 질문 보기

REACT · CH.20 — 질문하거나 답변을 확인하세요

→

진행도 20 / 34

← 커리큘럼으로 ← 목록으로 (React)