[NEXT JS] 최근검색어

▶︎ 목표

검색창에 입력한 검색어 및 키워드를 클릭 시, 최근 검색어에 저장하고 불러오기

1 step

로컬스토리지에 저장된 검색어들을 배열에 저장하고,
브라우저가 모두 랜더링된 상태에서 실행하도록 설정

useEffect(() => {
    if (typeof window !== "undefined") {
      const result = localStorage.getItem("keyword") || "[]";
      // 최근검색어 배열에 저장
      setRecentWordsBox(JSON.parse(result));
    }
  }, []);

* 로컬스토리지에서 배열을 가져올 때는 JSON.parse(localStorage key)로 가져온다.!

2 step

검색어가 추가 될 때마다 로컬스토리지에 배열 형식으로 저장하고,
데이터가 변동 있을 때마다 랜더

  useEffect(() => {
    localStorage.setItem("keyword", JSON.stringify(recentWordsBox));
  }, [recentWordsBox]);

* 로컬스토리지에서 배열형식으로 저장할 때는 JSON.stringify로 저장한다.!

• 로컬스토리지는 object를 저장할 수 없기 때문에 string으로 변환해서 저장해야 한다.

3 step

최근 검색어를 배열에 저장.

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 적용했고, 생각해보니 그 배열을 그냥 복사하면 되는 거였다..ㅠㅠ

---

---

---