최근 검색어 기능 구현

React

localstorage
blur

2023-04-30 22:25

이 블로그에는 검색 기능 구현한 것이 있다.

검색 input을 입력하면 onChange를 실행하여 검색어에 맞는 포스트를 실시간으로 보여주기 때문에 submit 이벤트가 발생되지 않아 최근 검색어 기록을 조금 다르게 구현해보려고 한다.

우선 input 창 옆에 check 버튼을 추가해준다.

check 이미지는 내가 자주 사용하는 heroicons에서 가져왔다. https://heroicons.com/

<SearchSave onClick={handleSave}>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
</SearchSave>

javascript

이제 check 버튼을 클릭하면 실행할 함수를 정의해주자.

첫 번째로, check 버튼 클릭 시 focus 되어있는 input을 blur 이벤트를 호출해 키보드 창을 숨길 것이다.

const handleSave = () => {
	document.activeElement.blur();
}

javascript

두 번째로, 최근 검색어를 보여주기 위해 검색어를 useState에 저장한다.

먼저, useState를 사용해 초기값이 빈 배열인 recentKeyword를 정의해준다.

const [recentKeyword, setRecentKeyword] = useState([]);

javascript

check 버튼을 클릭 시 set을 할건데, 최근 검색어 5개만 보여주기 위해 아래와 같이 작성한다.

const handleSave = (e) => {
    document.activeElement.blur();
    if (recentKeyword.length > 4) {
      setRecentKeyword(recentKeyword.filter((v, i, arr) => i !== arr.length - 1));
    }
    setRecentKeyword((prev) => [keyword, ...prev]);
  };

javascript