[React] 검색어와 동일한 단어 강조

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

개요

원티드의 8월 프리온보딩 사전 미션을 진행하면서 간단한 검색창을 구현했다.

 

검색창에 검색어가 입력되면 해당 단어가 강조되는 기능을 구현해야 했다.

 

 

구상

처음 생각한 방법은 해당 단어가 있는 문자열을 split() 함수로 자르고 해당 문자열 사이에 단어를 넣는 방법을 생각했다.

 

하지만 이 방법을 사용하기엔 같은 단어가 여러 번 반복되는 문자열인 경우에는 적용할 수 없다고 판단했다.

 

그래서 래퍼런스를 찾아보던 중 <mark> 태그를 사용해서 강조 처리하는 방법을 찾아 적용했다.

 

 

코드

// 1
const highlight = useCallback((text: string, query: string) => {
  // 2
  const parts = text.split(new RegExp(`(${query})`, 'gi'));

  // 3
  return (
    <>
      {parts.map((part, i) =>
        part.toLowerCase() === query.toLowerCase() ? (
          <mark key={`${part}_${i}`}>{part}</mark>
        ) : (
          part
        ),
      )}
    </>
  );
}, []);

 

1. 검색 목록 문자열(text)과 검색어(query)를 매개변수로 받는 함수 highlight이다.

 

2. (`(${query})`, 'gi') 처럼 작성할 경우 해당 'gi' 설정에 의해 대소문자 구분 없이 query와 동일한 모든 단어를 찾는다.

 

3. query와 같은 단어들로 구성된 parts의 모든 요소들을 <mark> 태그로 감싸준다.

 

 

해당 함수를 아래와 같이 컴포넌트에 적용할 수 있다.

<ul>
  {data.map((v) => (
    <li key={v.key}>
      {highlight(v, word)}
    </li>
  ))}
</ul>

 

 

구현 화면

 

 

전체 코드

https://github.com/eoqna/pre-onboarding-mission/tree/aug_onboarding_dbshin

GitHub - eoqna/pre-onboarding-mission: 프리온보딩 챌린지 8월 사전미션

 

 

참고 사이트

https://velog.io/@suyeonme/%ED%85%8D%EC%8A%A4%ED%8A%B8-%ED%95%98%EC%9D%B4%EB%9D%BC%EC%9D%B4%ED%8C%85

[react] 텍스트 하이라이팅

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/mark

<mark> - HTML: Hypertext Markup Language | MDN