Formik을 사용한 검색 기능

안녕하세요! 저는 이 초보자 친화적인 블로그를 만들어 양식에서 입력을 가져온 다음 간단한 기능을 사용하여 생성할 더미 데이터에서 받은 입력을 정렬할 수 있는 간단한 검색 기능을 만들었습니다.

이 기능을 구축하는 동안 특히 입력 필드가 많을 때 모든 입력 요소의 상태 처리를 더 쉽게 만드는 React 후크useFormik()를 사용할 것입니다. 블로그에서 Formik의 이점을 자세히 확인할 수 있습니다.

이야기는 그만하고 코딩을 시작해 봅시다!

1단계 - 더미 데이터 생성

export const dummyObject = [
  {
    id: "1",
    firstName: "Raj",
    lastName: "Bhinde",
    userLocation: "Mumbai"
  },
  {
    id: "2",
    firstName: "Smrithi",
    lastName: "Mohandas",
    userLocation: "Bangalore"
  },
  {
    id: "3",
    firstName: "Dhaval",
    lastName: "Bhinde",
    userLocation: "New Jersey"
  },
  {
    id: "4",
    firstName: "Mohit",
    lastName: "Bhinde",
    userLocation: "Thane"
  },
  {
    id: "5",
    firstName: "Shubham",
    lastName: "Dawkhar",
    userLocation: "Pune"
  }
];

2단계 - 입력 요소 생성

<form>
   <label htmlFor="firstName">First Name</label>
   <input type="text" />
   <label htmlFor="lastName">Last Name</label>
   <input type="text" id="lastName" />
   <label htmlFor="location">Location</label>
   <input type="text" id="location"/>
</form>

3단계 - 코드에 useFormik() 통합

const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      userLocation: ""
    },
    onSubmit: (values) => {
      console.log(values);
    }
  });

이제 입력 요소의 변경 사항은 다음과 같습니다.

<form onSubmit={formik.handleSubmit}
<input
      aria-label="input-firstName"
      id="firstName"
      type="text"
      onChange={formik.handleChange}
      value={formik.values.firstName}
/>
</form>

유형에 관계없이 모든 입력 상자에 대해 동일한 onChange & value 구문을 계속 사용할 수 있습니다. 이것은 formik이 스프레드 연산자 및 구문 작성을 제거하는 데 도움이 되는 곳입니다. 자체적으로 상태 업데이트를 처리합니다.

이제 제출 버튼을 누르면 콘솔에서 입력 값을 볼 수 있습니다. 이는 3단계에서 전달한 onSubmit 기능과 입력에 전달된 값을 콘솔에 기록하기 때문에 발생합니다.

다음 단계로 나아가자!

4단계 - 빈 값을 제거합니다.

우리는 검색 기능을 만들고 있기 때문에 입력에 제공된 값을 사용하여 필터링하고 formik에서 반환된 빈 값을 제거하기를 원합니다. 이를 위한 함수를 만들어 봅시다.

Before you look into the solution below, try to write a function for this by yourself. Basically you just have to delete the empty values of the keys in the JSON object.

const filterFunction = (values) => {
    const data = {...values};
     Object.keys(data).forEach((key) => {
      if (data[key] === "") {
        delete data[key];
      }
    });
}

이제 onSubmit의 console.log 위치에서 값을 인수로 사용하여 이 함수를 호출해 보겠습니다. 입력에 입력한 값만 JSON으로 가져오는 것을 볼 수 있습니다.

5단계 - 데이터를 필터링하는 함수를 만들어 보겠습니다.

Before you look into the solution below, try to write a function for this by yourself. Here, we are trying return the data where the key & value of our object matches with the dummyObject we created.

    var finalObject = dummyObject.filter(function (item) {
      for (var key in data) {
        if (item[key] !== data[key]) return false;
      }
      return true;
    });
    setSearchResults(finalObject);

여기에서 최종 객체의 결과를 저장하고 함수 외부에서 액세스하여 데이터를 표시하기 위해 useState를 생성했습니다.

6단계 - 데이터를 표시해 보겠습니다. 양식 태그 외부에 아래 코드를 작성하십시오.

{searchResults.length !== 0 &&
        searchResults.map((value, key) => {
          return (
            <div key={key}>
              {value.firstName} {value.lastName} {value.userLocation}
            </div>
          );
        })}

짜잔! 이제 검색 기능이 있는 양식이 생겼습니다.

여기까지 오셨다면 제 첫 번째 블로그를 읽어주셔서 감사합니다. 모든 종류의 질문 및 피드백을 환영합니다.

누구나 필요로 하는 경우를 대비하여 여기에 CodeSandBox 링크 포함 -