[TS] 검색&조회기능 개발하기

검색 기능 개발하기

interface UserInfo {
  name: string;
  cat: string;
}

const mockUsers: UserInfo[] = [
  { name: '홍길동', cat: 'one' },
  { name: '이순신', cat: 'two' },
  { name: '김유신', cat: 'three' },
];


const SearchUser = () => {
  const [searchTerm, setSearchTerm] = useState(''); // 입력하는 검색어 저장 상태
  const [foundUsers, setFoundUsers] = useState<UserInfo[]>([]); // 검색된 사용자 정보 저장 상태

// 검색어를 포함하는 user name이 있으면 그것을 새로운 배열로 생성함.
const userSearch = () => {
    const filteredUsers = mockUsers.filter((user) => user.name.includes(searchTerm));
    if (filteredUsers.length > 0) {
      setFoundUsers(filteredUsers);
    } else {
      alert('사용자를 찾을 수 없습니다.');
      setFoundUsers([]);
    }
  };

return (
	<div>
		<input value={searchTerm} onChange={(event) => setSearchTerm(event.target.value)}/>
		<S.SearchBtn onClick={userSearch}/>

		{foundUsers.map((user) => ( // 검색 결과 표시
      <div key={user.name}>
        <p>{user.name}</p>
        <img src={getImagePath(user.cat)} alt={`${user.name}의 이미지`} />
      </div>
    ))}
	</div>