얼마 전 인턴 채용 사전과제 중에 추천 검색어 하이라이팅 기능을 구현하는 과제를 받았습니다!
어떻게 구현했는지 공유해 보려고 합니다 -!
우선 검색어 하이라이팅이란 아래와 같은 기능을 말합니다.
내가 검색창에 친 문자열과 추천검색어 사이에 공통인 부분을 튀는 색을 주거나 하이라이팅을 함으로써 추천검색어와 내가 입력한 문자열이 얼마나 일치하는 지 나타내는 기능입니다.
- 추천 검색어를 현재 내가 input에 넣은 문자열로
split
한다.Array.prototype.split()
메소드는 주어진 문자열을 파라미터로 넘겨준separator
마다 끊은 부분 문자열을 담은 Array를 반환합니다.그런데,
separator
가 원본 문자열의 처음이나 끝에 등장할 경우 반환되는 배열도 빈 문자열로 시작하거나 끝납니다. 그러므로 원본 문자열에 separator 하나만이 포함되어 있을 경우 빈 문자열 두 개를 원소로 가지는 배열이 반환됩니다.
ex)'반가워안녕잘가안녕'.split('안녕')
의 결과는['반가워', '잘가', '']
이다.
- 따라서,
split
을 한 결과 배열을Array.prototype.map()
으로 돌면서 빈 문자열을 만났을 때만 따로 텍스트를 하이라이팅 해주는 컴포넌트를 반환하면 되는 것이다. (왜냐면 추천 검색어들은 보통 내가 입력한 문자열로 시작하기 때문에)
// 하이라이팅을 위한 컴포넌트
const MarkedText = ({ text }: { text: string }) => {
return <span className="text-NAILPINK font-bold">{text}</span>;
};
// 추천 검색어에 하이라이팅을 주는 함수
const getHighlight = (name: string, find: string) => {
const splitResult = name.split(find);
return splitResult.map((word, idx) => {
return word === "" ? <MarkedText text={find} /> : <span>{word}</span>;
});
};