[wanted pre onboarding] 2번째 과제: 검색어 추천이 있는 검색창 만들기

2022-02-25

과제 GitHub

https://github.com/NamgyungKim/wanted-codestates-project-3-10

이번 과제는 React와 Redux를 사용해서 검색어 추천이있는 검색창을 만드는 것이 과제 였다. 추가 도전과제로 주어진 API 호출 최적화가 있었다.

API 호출 최적화

세션 스토리지 이용
세션 스토리지에 이전에 검색한 키워드를 저장해 이후 같은 키워드를 검색했을 경우 세션 스토리지의 배열을 가져온다.

const writeSearchWord = async e => {
    //Todo : value에 공백이 추가된것도 같게본다. ex) '공   '와 '공' 전부
    const value = e.target.value.replace(/\s+$/gm, '');
    if (value === '') {
      setSelected(-1);
      dispatch(search([]));
    }
    // 캐시가 있을 때, 캐시 사용
    else if (sessionStorage.getItem(value)) {
      dispatch(search(JSON.parse(sessionStorage.getItem(value))));
    }
    // 없을 때 axios API 호출 => 세션 스토리 저장
    else if (value) {
      const URL = REACT_APP_SEARCH_API + value;
      const items = await axios.get(URL);
      sessionStorage.setItem(value, JSON.stringify(items.data.slice(0, 7)));
      dispatch(search(items.data.slice(0, 7)));
    }
    dispatch(keyDown(value));
  };

디바운싱 구현 input이 change될 때마다 API를 호출하는것이 아니라 0.4초의 딜레이 후 API 호출을 함으로 API호출 횟수를 줄였다.

const debounce = (callback, delay) => {
    // callback => 일정 시간이 지난 후 실행되는 함수
    // delay => 지연 시간
    let timer;
    return (...args) => {
      // 실행할 함수(setTimeout())를 취소
      setHandleLoading(true);
      clearTimeout(timer);

      // delay가 지나면 callback 함수를 실행
      timer = setTimeout(() => {
        setHandleLoading(false);
        return callback(...args);
      }, delay);
    };
  };

<input
    onChange={debounce(writeSearchWord, 400)}
    ref={inputRef}
    type="text"
    onKeyDown={pressKey}
    placeholder="질환명을 입력해 주세요."
/>

Namgyung

API 호출 최적화

Leave a comment