[React] 간단한 검색 기능 구현하기

검색 기능은 한번도 구현해본 적이 없는데 우연히 어떤 글을 보다가 따라하게 되었다.

색깔 배열

우선은 검색 기능을 구현하려면 검색할 대상이 있어야 하기 때문에 배열을 만들어 색깔 목록을 만들어주었다.

const colorList = ["red", "orange", "yellow", "green", "blue", "purple"];

색깔 목록을 만들어서 div태그로 보여주고자 한다.

컬러 목록 보여주기

ColorData.js

import React, { useState } from "react";

function ColorData() {
const colorList = ["red", "orange", "yellow", "green", "blue", "purple"];
return (
    <div>
{colorList.map((colorList, index) => {
        return (
          <div
           style={{
              margin: "auto",
              marginTop: "50px",
              color: "white",
              backgroundColor: colorList.name,
              textAlign: "center",
              fontSize: "20px",
              width: "100px",
            }}
            key={index}
          >
            {colorList.name}
          </div>
        );
      })}
</div>
  );
}
export default ColorData;

반응형

컬러 목록 결과물

컬러 목록 결과물

input 태그 만들기

<input type="text" style={{ margin: "30px 340px", height: "30px" }} />

검색 기능을 하기 위한 input 태그를 만들어준다. 그리고 input태그에 텍스트를 입력해줬을 때 onchange 이벤트를 만들어줘서 텍스트 값을 저장한다.

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

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

<input type="text" style={{ margin: "30px 340px", height: "30px" }} onChange={InputSearch} />

저장된 값을 가지고 데이터의 값과 비교를 하며 일치하는 데이터를 보여주면 된다. filter함수를 사용하여 조건에 맞는 데이터만 뽑아내어 보여주게 한다.

<div>
      <input type="text" style={{ margin: "30px 340px", height: "30px" }} onChange={InputSearch} />
      {colorList.filter((colorList)=>{
        if (search === "") {
          return colorList;
        } else if (colorList.name.toLowerCase().includes(search.toLowerCase())) { 
          return colorList;
        }
      })
      .map((colorList, index) => {
        return (
          <div
            style={{
              margin: "auto",
              marginTop: "50px",
              color: "white",
              backgroundColor: colorList,
              textAlign: "center",
              fontSize: "20px",
              width: "100px",
            }}
            key={index}
          >
            {colorList}
          </div>
        );
      })}
    </div>

→ 여기서 코드를 더 줄이고 싶다면 css를 따로 빼어 저장하는 방법이 있다. 또한 useState와 onchange일 때 실행되는 함수를 useInput으로 하여 따로 파일로 빼는 방법도 존재한다.

실행 화면

실행 화면

아래의 사이트를 따라하며 쓴 글입니다.

https://velog.io/@dev_ming/React-검색기능-만들기