이번 블로그 포스트에서는 Immer 라이브러리를 사용하여 문자열 검색 기능을 구현하는 방법에 대해 알아보겠습니다. Immer는 불변성을 유지하면서 상태를 업데이트하는 데 도움을 주는 JavaScript 라이브러리입니다.

1. Immer 설치하기

먼저, Immer를 설치해야 합니다. 다음 명령어를 사용하여 프로젝트에 Immer를 설치합니다.

npm install immer

2. 검색 함수 구현하기

이제 문자열 검색 기능을 구현하기 위한 함수를 작성해보겠습니다.

import produce from 'immer';

const search = (searchTerm, data) => {
  // 상태를 불변하게 업데이트하기 위해 Immer의 produce 함수를 사용합니다.
  const newData = produce(data, (draft) => {
    // 데이터의 각 요소를 순회하며 검색 조건에 맞는지 확인합니다.
    draft.forEach((item) => {
      if (item.includes(searchTerm)) {
        // 검색 조건에 맞는 요소를 별도의 속성으로 표시합니다.
        item.isMatch = true;
      } else {
        item.isMatch = false;
      }
    });
  });

  return newData.filter((item) => item.isMatch);
};

위의 코드는 searchTerm과 data라는 두 개의 매개변수를 받아 문자열 검색을 수행하는 search함수를 구현한 것입니다. immer를 사용하여 상태를 업데이트하며, forEach를 사용하여 각 요소를 순회하며 검색 조건에 맞는지 확인한 뒤, 검색 조건에 맞는 요소를 별도의 속성으로 표시합니다. 마지막으로, 검색 조건에 맞는 요소만 반환합니다.

3. 검색 기능 사용하기

이제 구현한 검색 함수를 실제로 사용해보겠습니다.

const data = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

const searchTerm = 'an';

const result = search(searchTerm, data);

console.log(result);
// 출력: ['banana', 'date']

위의 예제에서는 data 배열에 있는 요소들 중에서 searchTerm으로 검색한 결과를 반환받아 출력하는 예제입니다. search 함수를 호출하면서 검색할 문자열 searchTerm과 검색 대상 데이터 data를 전달합니다. 그리고 반환된 결과를 console.log로 출력합니다.

마무리

이렇게 Immer를 사용하여 문자열 검색 기능을 구현하는 방법에 대해 알아보았습니다. Immer는 불변성을 유지하면서 상태를 업데이트하는 것을 쉽게 할 수 있도록 해줍니다. 문자열 검색 기능 외에도 Immer는 복잡한 상태를 처리할 때 유용하게 사용될 수 있습니다.