react에서 자동완성 구현하기

react에서 자동완성을 구현할 일이 생겼다.
Input에서 이벤트가 발생할때마다 api를 호출하면되는 간단한 일이다.
하지만 내가 검색했었던 단어를 다시 호출하는것은 낭비라는 생각이 들었다.
따라서 캐쉬를 사용하기로 마음 먹었다.

npm 라이브러리 찾기

npm에서 cache를 검색하면 상당히 많은 라이브러리들이 나온다.
그 중 나는 lru-cache를 사용했는데, lru-cache 페이지를 처음들어가보면

가장 최근에 사용되지 않은 아이템을 지운다고 나와있다.
lru알고리즘을 사용한 라이브러리인것을 확인할 수 있다.
나는 자동완성을 구현할것이기 때문에 lru-cache를 사용하는것이 적절하다고 생각하여 사용하였다.

따라서 api를 호출할때 cache옵션을 주어 가지고 있지 캐쉬에 가지고 있지 않을 경우는 api를 호출한 다음, cache에 저장하였고,
가지고 있는 경우는 api를 호출하지 않고 다시 사가 함수에 캐쉬데이터를 전달하였다.

lru-cache내부 확인하기

    set(key: K, value: V, maxAge?: number): boolean;
    get(key: K): V | undefined;
    peek(key: K): V | undefined;

    /**
     * Check if a key is in the cache, without updating the recent-ness
     * or deleting it for being stale.
     */
    has(key: K): boolean;

lru-cache내부는 위와 같이 구성되어 있기 때문에 has로 값이 있는지 확인한다음, 없다면 api를 호출한다음 set을 하였고, 있다면 get을 통해 가져왔다.

사용하기

let data = searchCache.has(cacheKey) ? searchCache.get(cacheKey) : undefined;

이후 데이터가 없다면 api를 호출해주었다.