[React] 간단한 검색어 자동완성 UI 만들기

웹사이트에 흔히 있는 검색어 자동완성 UI를 만들어 보았다

---

function SearchBar({ updateChange, search, setSearch }) {
  return (
    <div className="search">
      <input
        className="seacrh-bar"
        style={{
          width: "100%",
          height: "40px",
          maxWidth: "800px",
          border: "1px solid white",
        }}
        placeholder="검색어를 입력하세요."
        onChange={(e) => updateChange(e)}
      ></input>
      .
      .
      .

우선 SearchBar 컴포넌트를 하나 만들어주었고 input에 onChange 속성으로 updateChange() 함수를 실행

let [search, setSearch] = useState([]);

자동완성 결과를 저장할 state도 하나 만든다

---

const updateChange = (e) => {
    let data = e.target.value;
    let filterData = mydata.filter((i) =>
      i.name.toLowerCase().includes(data.toLowerCase()) 
    );
    if (data.length === 0) {
      filterData = [];
    }
    setSearch(filterData);
  };

data: e.target.value로 input의 입력값 저장

filterData: 서버에서 받아온 데이터가 저장 되어있는 mydata 변수에 filter()를 돌려 데이터 안에 name속성을 소문자로 변환한다. 그리고 input의 입력값이 저장된 data변수를 소문자로 변환시켜 includes()를 활용해 같은 문자열이 포함된다면 filterData에 저장

마지막으로 setSearch를 이용, 필터링된 데이터를 저장

if (data.length === 0) {
      filterData = [];
    }

해당 조건문이 없다면 백스페이스로 input 입력을 전부 지웠을시 자동완성 칸이 남아있다, 그것을 방지하기 위한 조건문

---

이제 자동완성된 데이터를 뱉어주기만 하면 된다.

function SearchBar({ updateChange, search, setSearch }) {
  return (
    <div className="search">
      <input
        className="seacrh-bar"
        style={{
          width: "100%",
          height: "40px",
          maxWidth: "800px",
          border: "1px solid white",
        }}
        placeholder="검색어를 입력하세요."
        onChange={(e) => updateChange(e)}
      ></input>
      {search.map((item) => {
        return (
          <>
            <div className="search-result">
              <Link to={"/info/" + item.id}>
                <p onClick={() => setSearch([])}>
                  {item.name} ({item.kor_name})
                </p>
              </Link>
            </div>
          </>
        );
      })}
    </div>
  );
}

자동완성 결과가 저장되어있는 search state에 map을 이용해 렌더링하면 끝

자동완성 결과에 Link를 주어 누르면 해당 페이지로 바로 이동하게 하였다.

p 태그의 onClick 옵션은 페이지로 이동후 뒤로가기를 하면 자동완성 UI가 그대로 남아있기때문에 자동완성 결과를 초기화 하기 위한 코드이다.

CSS는 알아서.. (CSS가 제일싫어.................)