[TIL] 2023-0112 : 3주차 과제 진행 과정 -2 디바운싱, 캐싱, 키보드 이벤트

🐈오늘 배운 것

✔️ 프리온보딩 인턴쉽 3주차 과제 w. TS 삽질 등..

언제나 그렇듯 마크업은 힐링되면서 킹받는단 말이지(?)

 

1. useState의 두 값 state, setState 함수 props로 전달하기

state는 기존 초기값의 타입을 지정하면 되고, setState는 리액트에서 제공하는 setState 함수 타입을 적용할 수 있다.

type SearchBarProps = {
  isDropDownOpen: boolean;
  setIsDropDownOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

타입을 모르겠을땐 커서를 올려보자...!

 

2. typescript input Element 의 이벤트 객체 타입 : React.ChangeEvent<HTMLInputElement>

3. 디바운싱을 적용하여 API 호출 최적화하기

디바운싱이란? 연이어 호출되는 함수들 중에서 가장 마지막 함수 혹은 제일 처음 함수만 호출하도록 하는 것이다. 연속적인 호출이란 예를들면 Input 값의 변화에 따라서 api를 호출하는 경우가 있을 수 있겠다. 이 경우 모든 입력 (자음..모음..) 마다 api 를 호출하게되면 호출 횟수가 너무 많아지므로 최적화할 필요가 있다. 만약 유료 api를 사용한다면 api 요청 횟수가 중요하기 때문에 더욱 필요할지도.

 

현재 하고싶은 것은 input의 onChange 이벤트가 실행될때마다 api를 호출하고 이 호출에 디바운싱을 걸어주는 것이다. 이를 위해서 useDebounce 라는 커스텀 훅을 생성했다.

0.5초 안에 들어온 요청은 clearTimeout에 의해서 취소된다. setTimeout 함수의 반환값은 timeoutID 라는 정수이고 이 값을 clearTimeout 에 전달하면 타이머를 취소할 수 있다.

- 참고로, typescript 환경에서 setTimeout 과 celarTimeout 을 사용하려면, 브라우저 환경에서라면 window.- 를 붙여주어야 한다. https://www.zodaland.com/tip/11

- 적용 결과를 콘솔에 찍어서 확인하면 이렇다.

좌) 적용 전 - onChage 이벤트와 함께 요청을 보낸다. 우) 적용 후 - 나머지는 다 취소되고 0.5초 동안의 마지막 요청만 실행된다.

4. 검색 결과와 일치할 경우 스타일 변경하기

<span>
    {sickNm.includes(query) ? (
      <>
        {console.log(sickNm.split(query))}
        {sickNm.split(query)[0]}
        <MatchingText>{query}</MatchingText>
        {sickNm.split(query)[1]}
      </>
    ) : (
      sickNm
    )}
</span>

const MatchingText = styled.span`
  font-weight: 600;
  color: var(--main-blue);
`;

searchQuery와 일치하는 경우만 찾아 스타일링된 컴포넌트를 씌워줬다.

query를 제외하고 요로코롬 나오는데 그 중간에 일치하는 부분만 싹 바꿔줬다.

 

5. 한 번 요청한 api 캐싱하기

이미 요청을 해서 값을 리턴받은 부분에 대해서는, 새로운 요청을 보내지 않고 값을 로컬에서 캐싱하도록 했다. 데이터 요청을 할 때 로컬 스토리지에 저장하고, 로컬스토리지에 값이 없는 경우에만 요청을 보내도록 작성했당.

이 로직을 수행하는 getResults 함수를 리턴하는 훅을 만들고, 

필요한 컴포넌트에 가서 이렇게 사용할 수 있음! 

 

6. 검색창 키보드로 이동하기

키보드 이벤트를 줄 최상단 부모 컴포넌트에 위와 같이 인덱스 상태와 변경하는 함수를 정의한다. results 라는 추천 검색어 배열을 기준으로 위,아래를 돌며 선택할 인덱스 번호를 변경한다.

results 배열의 각 아이템을 표시하는 컴포넌트에 조건부로 클래스 이름을 정의하여 스타일을 지정했다.

초간단하게 구현 끝

🐈Feedback

- 과제 구현이 생각보다 오래걸렸다. 어떤 것이든 많이 만들면서 손에 익혀야겠다.