[2023.05.11 개발 일지] 리액트 Input 디바운스 구현하기

[2023.05.11 개발 일지] 리액트 Input 디바운스 구현하기

주요 업무 내용

• Input 디바운스 구현하기
• Search Loading Spinner 구현하기
• 리액트 책 읽기

Input 디바운스 구현하기

실시간 검색에서는 input에 입력을 받을 때마다 api호출을 하고 입력 값에 맞는 api 호출 결과를 보여주게 된다.

이 경우에는 포켓몬의 정확한 영문명 혹은 id 값을 통해서 api를 호출하고 해당 포켓몬 결과를 보여준다.

그렇기때문에 정확한 영문명이나 id를 입력하기 전까지는 api 호출을 하더라도 404에러가 발생할 것이다.

오류가 발생할 것이 자명하고 서버의 자원을 낭비하지않기 위해서 디바운스를 통해서 입력을 일정 시간 기다렸다가 api를 호출한다.

 

const onFetchHandler = (event) => {

    event.preventDefault();

    valueChangeHandler(event);

    setTimeout(() => {

      fetchPokemon(event.target.value);

    }, 500);

  };

 

새로운 입력이 없다면 input의 onChange 함수인 onFetchHandler가 실행되지 않을 것이고 0.5초 후에 api를 호출한다.

새로운 입력이 있을 때마다 타이머는 갱신되고 api호출을 하지 않을 것이다.

Search Loading Spinner 구현하기

api를 호출중이거나 오류 상태일 때 이미지가 없어서 프로필 이미지가 비어있는 상태로 나오는데 보기에 좋지않다.

그래서 검색 결과를 불러오는 동안 loading spinner를 추가하려고 한다.

기존에 만들어둔 GifProgress 컴포넌트에 gif 파일과 width만 설정하니 쉽게 만들었다.

재사용성을 고려하여 컴포넌트 제작의 중요성을 체감했다.

마음에 드는 loading spinner gif를 찾는데에 더 시간이 오래걸렸다.

 loading spinner는 아래 사이트에서 직접 제작할 수 있어서 좋다.

https://loading.io

또 하나의 문제가 있었는데 다른 로딩 화면을 보여줄 때도 발생하는 문제로 로드가 빨라서 로딩 상태가 잠깐 깜빡이면서 보이는데 보기가 안 좋다.

 

setTimeout(() => {

    setIsLoading(false);

    }, 500);

 

해결 방법을 찾아보니 로드가 완료되었어도 setTimeout으로 로딩 시간 보다 더 많은 시간동안 spinner를 보여주도록 한다.

리액트 책 읽기

Do it 리액트 프로그래밍 정석을 계속 읽어 봤는데 처음에는 몰랐는데 계속 읽어보니 추천하고 싶지 않다.

일단 책이 20년도에 발행된 책인데 클래스형 컴포넌트로만 설명이 되어있다.물론 클래스형 컴포넌트도 알아야 하지만 현재 대부분 함수형 컴포넌트를 사용하고 있어서 현업과 동떨어진 내용이다.관련된 개념을 학습하기에는 나쁘지는 않을 수 있지만 굳이 클래스형 컴포넌트로 적용한 개념을 다시 함수형 컴포넌트로 따로 배워야하기때문에 이 책으로 학습할 이유는 없어보인다.스토리북이나 테스트, 디자인 패턴 같은 몰랐던 내용들에 대해서 대략적인 느낌을 파악하는데에 만족했다.역시 공식문서와 웹, 인강으로 공부하면서 토이프로젝트를 만들어보는게 가장 좋아보인다.