React - Typescript + Hook (4)

검색기능을 추가했다. 글자를 입력하면 바로바로 검색되는 기능으로 구현.

App.tsx 파일에 기능들을 추가했다.

그리고 Main.tsx에 handleSearch 함수를 내려주고 input값을 다시 받아와서 PhoneList.tsx에 다시 내려주는 방식을 채택했다.

 

App.tsx

import React, { useState, useEffect } from "react";
import Main from "./Main";
import PhoneList from "./PhoneList";
import data from "./data";

interface EmptyArray {
  nickname: string;
}

function App() {
  const [list, get_list] = useState(data);
  const [searchList, get_searchList] = useState<string>("");

  const get_data = () => {
    console.log(searchList, list);
    if (searchList === "") {
      get_list(data);
    } else {
      get_list(
        list.filter((x: EmptyArray) => x.nickname.indexOf(searchList) !== -1)
      );
    }
  };

  const handleSearch = (searchData: string) => {
    get_searchList(searchData);
  };

  useEffect(get_data, [searchList]);

  return (
    <div className="App">
      <Main handleSearch={handleSearch} />
      <PhoneList course={list} />
    </div>
  );
}

export default App;

 

Main.tsx

onChange에서 발생하는 event도 type을 정해줘야 한다. event: React.ChangeEvent<HTMLInputElement>로 지정을 해줬다. type을 지정한 값을 외울 필요는 없다. onChange에 마우스를 올리면 event의 type을 알 수 있다.

import React from "react";
import logo from "./image/logo.jpg";
import styled from "styled-components";

interface PropsData {
  handleSearch: (data: string) => void;
}

function Main({ handleSearch }: PropsData) {
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    handleSearch(event.target.value);
  };
  return (
    <Home>
      <Logoscreen>
        <img src={logo} alt="logo" />
      </Logoscreen>
      <InputBox>
        <input type="text" placeholder="검색란" onChange={onChange} />
      </InputBox>
      <WriteButton>
        <button>번호등록</button>
      </WriteButton>
    </Home>
  );
}

export default Main;

 

검색기능을 실행해보면 작동은 되지만 문제점이 있다.

h를 입력하면 닉네임에 h가 들어간 data만 filter 되어져 나온다.

 

h만 입력 했을 때.

 

 

hr를 입력했을 때, filter 에 걸러져서 맞는 data가 없기 때문에 빈화면이 뜸. 여기까지는 잘 구현이 된다.

 

hr 입력했을 때

 

다시 r을 지웠을 때, h만 입력한 값이 나와야 되는데 화면이 나오지 않는 문제점이 있다.

 

hr에서 r을 지웠을 때

 

문제점을 해결하기 위해 다른 방법을 고안하고 있다. =>(10/29)

 

(11/2) 문제해결

검색을 하고 문자열을 지웠을 때, filter가 되지 않았는데 해결을 했다. list가 변경되고 문자를 하나씩 지울때,  빈배열이 들어와 있었는데, 모든 데이터에서 filter를 할 수 있도록 변경해서 구현 했더니, 해결되었다.

  *get_list 인자를 list => data로 변경

const get_data = () => {
    if (searchList !== "") {
      get_list(
        data.filter((x: PropsData) => x.nickname.indexOf(searchList) !== -1)
      );
    } else {
      get_list(data);
    }
  };

#Typescript#react#hook#phonebook#filter