[ React ] 검색 가능한 SelectBox 컴포넌트 구현

[ React ] SelectBox 컴포넌트 구현

지난번 만든 SelectBox에서 더 나아가 검색을 통해 옵션 리스트를 불러오는 SelectBox를 만들어봤다.

 

기본 틀은 이전과 동일 !!

 

 

추가할 내용

1. Input
2. Input에 따라 달라지는 options

 

 

1. Input

<SearchSelectorInput
  type="text"
  onChange={...}
  value={keyword}
/>

 

입력된 값을 보여주기 위해 keyword 변수를 생성했다.

// Input 컴포넌트에 바인딩하는 Keyword
const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
  setKeyword(e.target.value);
};

 

또한 options 에서 값이 선택되었을 때도 SelectBox 안에 표시해주기 위해 keyword 값을 변경해줘야 한다.

const handleClick = (item: string) => {
  onChange(item);
  setKeyword(item);
  handlePopup();
};

 

 

 

2. onInput

입력된 값을 상위 컴포넌트로 올려주어 입력값에 따라 options를 변경할 수 있게 하기 위해 onInput 함수를 props로 추가했다.

  onInput: (keyword: string) => void;

 

props로 내려받은 onInput을 매번 실행하는 것은 비효율적이라고 생각해 debounce를 적용했다.

import debounce from "lodash/debounce";

const decounceOnInput = debounce((e: React.ChangeEvent<HTMLInputElement>) => {
  onInput(e.target.value);
}, 500);

이때 debounce를 걸어주었음에도 input의 값이 변할 때마다 debounceOnInput 함수가 재생성되어 결국 input에 변화가 있을 때마다 매번 onInput 함수가 실행되는 것을 볼 수 있다.

 

따라서 useCallback 훅을 사용해 decounceOnInput 함수를 메모이제이션해 함수가 재생성되는 것을 막고 debounce가 제대로 적용될 수 있도록 했다.

  const decounceOnInput = useCallback(
    debounce((e: React.ChangeEvent<HTMLInputElement>) => {
      onInput(e.target.value);
    }, 500),
    [onInput]
  );

 

이제 돋보기 아이콘 placeholder로 넣어주고 키보드 이벤트 추가하면 완성!!