들어가며
검색 기능을 만들다 보면 사용자가 이전에 검색했던 단어를 다시 보여주고 싶을 때가 있습니다.
서버에 저장할 만큼 중요한 정보가 아니라면, 브라우저의 localStorage만으로도 간단한 최근 검색어 기능을 만들 수 있습니다.
이번 글에서는 최근 검색어를 최대 6개까지 저장하고, 중복 검색어는 맨 앞으로 올리는 방식으로 구현해볼게요.
저장할 key 정하기
먼저 localStorage에 사용할 key를 상수로 분리합니다.
1
const RECENT_KEYWORDS_KEY = "recent_keywords";
key를 문자열로 여러 곳에 직접 쓰면 오타가 생기기 쉬우므로 상수로 관리하는 편이 좋습니다.
검색어 저장하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const saveSearchKeyword = (keyword) => {
const trimmedKeyword = keyword.trim();
if (!trimmedKeyword) return;
const keywords = getRecentKeywords();
const nextKeywords = [
trimmedKeyword,
...keywords.filter((item) => item !== trimmedKeyword),
].slice(0, 6);
localStorage.setItem(RECENT_KEYWORDS_KEY, JSON.stringify(nextKeywords));
};
핵심은 세 가지입니다.
- 빈 문자열은 저장하지 않습니다.
- 이미 저장된 검색어는 제거한 뒤 맨 앞에 다시 추가합니다.
- 최대 6개까지만 유지합니다.
검색어 불러오기
1
2
3
4
5
6
7
8
9
10
11
const getRecentKeywords = () => {
const savedKeywords = localStorage.getItem(RECENT_KEYWORDS_KEY);
if (!savedKeywords) return [];
try {
return JSON.parse(savedKeywords);
} catch {
return [];
}
};
localStorage에는 문자열만 저장할 수 있으므로 배열은 JSON.stringify로 저장하고, 꺼낼 때는 JSON.parse로 복원합니다.
혹시 저장된 값이 깨져 있을 수 있으니 try-catch로 감싸두면 더 안전합니다.
개별 검색어 삭제하기
1
2
3
4
5
6
7
const deleteKeyword = (targetKeyword) => {
const nextKeywords = getRecentKeywords().filter(
(keyword) => keyword !== targetKeyword,
);
localStorage.setItem(RECENT_KEYWORDS_KEY, JSON.stringify(nextKeywords));
};
삭제하려는 검색어를 제외한 배열을 다시 저장하면 됩니다.
전체 삭제하기
1
2
3
const clearAllKeywords = () => {
localStorage.removeItem(RECENT_KEYWORDS_KEY);
};
전체 삭제는 key 자체를 제거하면 됩니다.
React에서 사용하는 예시
1
2
3
4
5
6
const handleSearch = (keyword: string) => {
saveSearchKeyword(keyword);
// 검색 요청 또는 페이지 이동 로직
};
const recentKeywords = getRecentKeywords();
검색 버튼을 누르거나 Enter를 입력했을 때 saveSearchKeyword를 호출하면 최근 검색어가 저장됩니다.
화면에서는 getRecentKeywords()로 가져온 배열을 렌더링하면 됩니다.
마무리
최근 검색어 기능은 localStorage만으로도 간단하게 구현할 수 있습니다.
검색어 저장, 중복 제거, 최대 개수 제한, 개별 삭제, 전체 삭제만 잘 분리해두면 UI와도 쉽게 연결할 수 있습니다.
사용자별 동기화가 필요하지 않은 가벼운 기능이라면 프론트엔드에서 처리하기 좋은 방식입니다.