React | filter로 문자열 검색이 안될 때 (한글 자모 분리)

"P-042-주차장 램프 수평재 배근도(Rev.0)" 이런 이름의 문자열이 있을 때,
filter 후에 includes로 찾아봤는데 검색 결과에 포함되지 않았다

문자열에 포함된 한글의 자모가 분리되어 있는 경우 발생할 수 있는 문제인데
특히 문자열에 자모가 분리된 형태(예: 주차장)가 들어가면
includes 함수가 이를 정상적으로 인식하지 못할 수 있다

찾아보니 "주차장"과 "주차장"은 육안으로는 동일해 보이지만,
실제로는 다른 유니코드로 처리될 수 있기 때문에
한글 자모 분리 문제를 해결하는 추가 로직이 필요한 것이다

이 문제를 해결하기 위해 자모 분리된 문자열을 정규화해야 한다

자바스크립트의 normalize() 메소드를 사용해서
문자열을 NFC(정규화된 완성형)로 변환하면 해결할 수 있다

MDN - String.prototype.normalize()

🔽 기존 코드

const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
  const searchValue = e.target.value;
  setSearch(searchValue); // 입력된 검색어 상태 업데이트

  if (searchValue === "") {
    // 검색어가 없으면 원본 데이터를 다시 설정
    setData(result); // 초기 데이터를 다시 설정
    return;
  }

  // 검색어가 있을 때는 항상 원본 데이터(result)에서 필터링
  const searchedData = result.filter(
    (i) =>
      i.drawingName.includes(searchValue) ||
      i.floorName.includes(searchValue) ||
      i.groupName.includes(searchValue) ||
      i.quantity.toString().includes(searchValue)
  );
  setData(searchedData); // 필터된 데이터로 업데이트
};

🔽 수정 코드

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const searchValue = e.target.value;
    setSearch(searchValue);
    // 필터링할 데이터 정규화
    const normalizedSearchValue = searchValue.normalize("NFC");

    if (normalizedSearchValue === "") {
      setData(result as GetOrderListType);
    } else {
      const searchedData = result?.filter((i) => {
        const normalizedDrawingName = i.drawingName.normalize("NFC");
        const normalizedFloorName = i.floorName.normalize("NFC");
        const normalizedGroupName = i.groupName.normalize("NFC");

        return (
          normalizedDrawingName.includes(normalizedSearchValue) ||
          normalizedFloorName.includes(normalizedSearchValue) ||
          normalizedGroupName.includes(normalizedSearchValue) ||
          i.quantity.toString().includes(normalizedSearchValue)
        );
      });
      setData(searchedData as GetOrderListType);
    }
  };