검색창에 입력한 검색어 및 키워드를 클릭 시, 최근 검색어에 저장하고 불러오기
로컬스토리지에 저장된 검색어들을 배열에 저장하고,
브라우저가 모두 랜더링된 상태에서 실행하도록 설정
useEffect(() => {
if (typeof window !== "undefined") {
const result = localStorage.getItem("keyword") || "[]";
// 최근검색어 배열에 저장
setRecentWordsBox(JSON.parse(result));
}
}, []);
* 로컬스토리지에서 배열을 가져올 때는 JSON.parse(localStorage key)
로 가져온다.!
검색어가 추가 될 때마다 로컬스토리지에 배열 형식으로 저장하고,
데이터가 변동 있을 때마다 랜더
useEffect(() => {
localStorage.setItem("keyword", JSON.stringify(recentWordsBox));
}, [recentWordsBox]);
* 로컬스토리지에서 배열형식으로 저장할 때는 JSON.stringify
로 저장한다.!
최근 검색어를 배열에 저장.
const SaveRecentWords = (keyword) => {
// 공백제거.
const removeSpace = keyword.replace(/(^\s*)|(\s*$)/, "");
// 최근검색어 배열 복사.
const temp = [...recentWordsBox];
// 같은단어 찾기
const checkWord = temp.find((data) => data.keyword === removeSpace);
// 같은단어가 없는 경우,
if(!checkWord) {
const passedWord = {
id: Date.now(),
keyword: removeSpace,
}
}
// 검색한 단어를 앞에 추가하고, 총 10개까지만 저장되도록 설정
setRecentWordsBox([passedWord, ...recentWordsBox.splice(0,10)])
}
최근검색어가 중복되지 않게 배열 앞에 추가되도록 하기.
// 같은 단어가 있는 경우,
else if (checkWord) {
// 단어추가
const passedWord2 = {
id: Date.now(),
keyword: removeSpace,
}
// 같은 단어 제거
const filtered = temp.filter(
(data) => data.keyword !== removeSpace)
// 검색한 단어를 앞에 추가하고, 같은 단어를 삭제한 배열을 복사
setRecentWordsBox([passedWord2, ...filtered.splice(0,10)])
}
처음에 같은 단어만 추가되지 않도록만 구현을 했었다.
그러다보니 중복된 단어가 있으면 최근검색어에 맨 앞에 나오지 않는 것이다..
그래서 중복된 단어가 있다면 id를 비교해서 값이 큰 것을 남기고, 삭제하는 것으로 구현하려고 했었다.
하지만 id 값을 비교해도 삭제가 되지 않고, 같은 단어가 추가가 되버려 다시 또 생각을 하고, 구글링을 했다.
중복된 단어들을 비교해서 삭제/추가를 하려고만 했어서 filter를 전혀 생각하지 못했다.
단순히 그냥 중복된 단어 삭제하고, 값을 추가하면 되는데...
하루종일 같은 것만 생각하다보니 다른생각을 못하게 되서 더 이상 할 수가 없었다.
다음 날 카페에서 마음 잡고 다시 시작했다.
단순하게 같은 값을 삭제하는 거부터 시작하는 마음으로 filter 적용했고, 생각해보니 그 배열을 그냥 복사하면 되는 거였다..ㅠㅠ