[JS] 검색 기능

1. 검색에 걸릴 목록을 배열에 담는다.  

const colorList = [ '빨강', '주황', '노랑', '초록', '파랑' ];

 

2. 검색창을 input 태그를 이용해 만들어준다. 이 때 검색창에 입력되는 글자를 받아야 하므로, onChange 이벤트로 받아준다. 입력된 값을 search 변수에 받아준다.

<input onChange={onChange} />

const [search, setSearch] = useState("");

const onChange = (e) => {
    setSearch(e.target.value);
};

 

3. 미리 만들어둘 검색 목록 배열에서 찾는다.

const filterList = colorList.filter((c) => {
    c = c.toString();
    return c.replace(" ", "").includes(search);
  });

 

4. 찾은 목록들을 띄운다.

{search !== "" ? (
        <Result>
          {filterList.map((f) => (
            <div>
              <p>{f}</p>
              <hr />
            </div>
          ))}
        </Result>
      ) : (
        <></>
      )}