검색 기능 구현 시 고려사항(API 호출 시점, debouncing)

프로젝트 공책에는 Book과 Friend에 대한 검색 기능이 들어갔습니다.

조회 범위는 해당 유저(자신)에 연결되어있는 Data(Book, Friend)이므로 일반적으로 조회할 Data의 규모가 커지기는 어렵습니다.

따라서, 성능 최적화에 대한 필요성이 높지는 않겠지만 성능을 고려한 코드를 작성하고 사고하기위해 연습해본 과정을 글로 남겼습니다.

요구사항: 검색 버튼(Submit) 없이 즉시 검색 결과를 노출합니다.

검색 기능을 설계할 당시 검색 버튼(Submit) 없이 타이핑을 할 때마다 검색결과를 노출하도록 구현하는것을 목표했습니다.

다음과 같은 요구사항을 구현하기 위해서 고민해야 했던 부분은 다음과 같습니다.

 

API 호출은 언제 해야 하는가?

위와 같은 질문에 두가지 시점의 선택지를 생각해보았습니다.

1. 유저가 검색창에 접근했을 때 API 호출을 한다.
2. 타이핑을 할 때마다 API 호출을 한다.

처음에는 크게 고민하지 않고 2번(타이핑을 할 때마다 API 호출을 한다)을 선택했습니다.

그 이유는 다음과 같습니다.

• 전체 데이터를 호출하는 것보다 검색어에 해당하는 데이터만 부분적으로 요청하는 것이 나을 것이다.
• 디바운싱을 적용하여 타이핑 중에는 API 호출을 하지 않게 하면 호출을 최소화 할 수 있을 것이다.

하지만 막상 구현해보니 미묘하게 검색결과 노출이 느립니다.

API를 호출하고 응답을 받는데 시간이 지연되었기 때문입니다.

그래서 시점을 선택했던 처음으로 돌아가 1번(유저가 검색창에 접근했을 때 API 호출을 한다) 방법대로 코드를 구현해보았습니다.

// GET all books
const { data } = useBooks(session?.user?.id);
// 검색 결과
const [searchResults, setSearchResults] = useState<IBookWithTags[]>([]);

// 검색 결과 return
const filterBooks = useCallback(
  (search: string) => {
    if (!search || !data?.books) return [];
    return data.books.filter((book) => {
      return book.title.includes(search);
    });
  },
  [currentTab, data?.books]
);

// bookData 호출 시 디바운스는 제거하고, 검색어 입력에만 디바운스 적용
const setResultsWithDebounce = _.debounce(
  useCallback(
    (value: string) => {
      setSearchResults(filterBooks(value));
    },
    [filterBooks]
  ),
  200
);

 

구현한 검색페이지의 동영상 캡쳐입니다.

1번선택지(유저가 검색창에 접근했을 때 API 호출을 한다.)를 채택해서 얻을 수 있었던 장점은 다음과 같이 정리할 수 있습니다.

• 매번 입력할 때마다 API를 호출하지 않으므로 네트워크 부하나 지연을 방지할 수 있습니다.
• 따라서 초기에 한번 호출한 데이터를 클라이언트 측에서 필터링하는 것이 더 효율적입니다.