React TypeScript 검색 필터 만들기 상태 결과 목록 연결

독립 실습: 검색어와 완료 조건의 교집합 구하기

JavaScript 함수·배열과 TypeScript 객체 타입을 알고 시작합니다. 실행 환경은 React Vite 환경 준비의 React + TypeScript 프로젝트를 사용합니다. 이전 TaskFlow 코드는 필요 없습니다. 생성된 src/main.tsx는 유지하고 별도 연습 프로젝트의 src/App.tsx를 아래 전체 코드로 교체한 뒤 npm run dev로 여는 주소에서 확인합니다.

src/App.tsx 전체 코드

import { useState } from 'react';
type Status = 'all' | 'active' | 'completed';
const tasks = [
  { id: 'a', title: 'React 읽기', completed: false },
  { id: 'b', title: 'React 실습', completed: true },
  { id: 'c', title: '산책', completed: false },
];
export default function App() {
  const [keyword, setKeyword] = useState('');
  const [status, setStatus] = useState<Status>('all');
  const visible = tasks.filter(task =>
    task.title.toLowerCase().includes(keyword.trim().toLowerCase()) &&
    (status === 'all' || (status === 'completed' ? task.completed : !task.completed))
  );
  return (
    <main>
      <input aria-label="검색" value={keyword} onChange={e => setKeyword(e.target.value)} />
      <select aria-label="상태" value={status} onChange={e => setStatus(e.target.value as Status)}>
        <option value="all">전체</option><option value="active">진행 중</option><option value="completed">완료</option>
      </select>
      <button onClick={() => { setKeyword(''); setStatus('all'); }}>초기화</button>
      {visible.length ? <ul>{visible.map(task => <li key={task.id}>{task.title}</li>)}</ul> : <p>결과 없음</p>}
    </main>
  );
}

직접 확인: 검색어 REACT와 완료 조건에는 React 실습만 보입니다. 없는 단어에는 결과 없음, 초기화에는 3개가 표시됩니다.

변형 과제: 산책+완료 조합이 빈 결과인 이유를 두 조건 각각으로 설명합니다.