작품검색의 로직변경! 실시간 반영 검색기능 구현하기!

검색기능!

기존의 검색기능 구현중에 의견이 나왔기에 반영을 해보려고 했다. 

기존의 작품검색의 로직은 움짤과 같이 검색 Input 창에 검색어를 입력후 search 버튼을 눌러야 검색 로직이 작동해 작품정보를 받아와 결과로 뿌려주게 된다. 

 

 

원하는 동작!

원하는 동작의 버전은 검색버튼을 누르는 추가동작없이 input 창에 검색어를 입력하면 실시간 반영되어 검색결과가 나오길 희망했다. 하지만 이기능의 구현을 생각하다보니 문제점이 생겼다.

 

생겨난 문제점!

이러한 동작을 생각해 검색어를 입력할때마다 감지하여 useEffect 기능을 사용해 search() 통신컴포넌트를 실행시키는 로직을 설계해봤다. 하지만 이렇게 간단히 구성하니 검색단어의 구성글자 한글자마다 통신이 오고가 엄청난 자원낭비가 생긴다는걸 인지했다. 

 

예) 겟 아웃 이라는 검색어로 검색시 ㄱ+ㅔ+ㅅ, ㅇ+ㅏ , ㅇ+ㅜ+ㅅ 으로 나누어져 짧은 단어임에도 불구하고 8번의 통신이 생기게 되는것이었다.

 

해결법! 

이러한 자원 낭비를 막기위해 생각한 방법은 

 

1. 검색어 입력으로 query  문에 변경이 있을시 0.5초 타이머를 실행시킨다. 

 

2. 타이머가 작동중인 0.5초간 추가로  query문 입력이 있을시 타이머를 초기화 시킨다.

 

3. 타이머가 작동중인 0.5초간 추가로 query문 입력이 없을시엔 search() 함수를 실행시켜 통신을 해 검색결과를 받아온다.

 

 

이런식으로 구성을 하게되면 글자의 구성획마다 통신이 가지 않게 되고 사용자가 검색어 입력이 종료되면 자동으로 검색 함수가 실행되기에 불필요한 자원낭비 없이 실시간 검색기능을 사용할 수 있었다.

 

다음은 실제로 추가된 검색로직의 추가부분이다.

 

const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    // 검색어 입력(input)에 변화가 생겼을 때, 입력된 내용을 상태에 저장
    setQuery(event.target.value);
  };

  useEffect(() => {
    let timer: NodeJS.Timeout; // 타이머 변수 선언

    // 입력된 검색어(query)가 존재할 때만 실행
    if (query) {
      // 0.5초 후에 search 함수를 실행하는 타이머 설정
      timer = setTimeout(() => {
        search(); // 검색 함수 실행
      }, 500);
    }

    // useEffect가 다시 실행되기 전에 이전 타이머가 존재하면 제거
    return () => {
      clearTimeout(timer); // 이전 타이머 제거
    };
  }, [query]); // query 상태가 변경될 때마다 useEffect 실행

 

 

실제 작동모습