Custom Hook을 활용한 오토컴플릿 기능 구현

06 Nov 2023

reactjs

React 애플리케이션을 개발할 때, 자동 완성 기능을 구현해야 하는 경우가 종종 있습니다. 이러한 기능을 구현하기 위해 Custom Hook을 활용할 수 있습니다. Custom Hook은 자주 사용되는 로직을 재사용할 수 있도록 도와주는 기능입니다. 이번 포스트에서는 Custom Hook을 활용하여 오토컴플릿 기능을 구현하는 방법에 대해 알아보겠습니다.

Custom Hook 생성하기

먼저, 오토컴플릿 로직을 담은 Custom Hook을 생성해야 합니다. 이 Hook은 입력값에 따라 자동으로 완성될 수 있는 옵션들을 반환하는 역할을 합니다. 예를 들어, 유저가 입력한 텍스트에 따라 데이터베이스에서 검색하여 해당하는 결과를 반환할 수 있습니다.

import { useState, useEffect } from 'react';

const useAutocomplete = (inputValue) => {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    // API 호출하거나 데이터베이스에서 결과를 가져오는 로직
    // 입력값에 따라 옵션을 설정하는 로직
    const fetchOptions = async () => {
      // API 호출 또는 데이터베이스 검색 로직 구현
      const options = await fetch('https://api.example.com/autocomplete', {
        method: 'POST',
        body: JSON.stringify({ inputValue }),
      }).then((response) => response.json());

      setOptions(options);
    };

    fetchOptions();
  }, [inputValue]);

  return options;
};

export default useAutocomplete;

위의 코드에서는 inputValue를 매개변수로 받아 해당하는 옵션들을 반환하는 useAutocomplete Custom Hook을 정의하고 있습니다.

컴포넌트에 Custom Hook 적용하기

이제 Custom Hook을 사용하여 오토컴플릿 기능을 가진 컴포넌트를 구현할 차례입니다. 예를 들어, 검색 기능을 가진 컴포넌트를 구현한다고 가정해봅시다.

import React, { useState } from 'react';
import useAutocomplete from './useAutocomplete';

const SearchComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const options = useAutocomplete(inputValue);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <ul>
        {options.map((option, index) => (
          <li key={index}>{option}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchComponent;

위의 코드에서는 useAutocomplete Hook을 options 변수에 적용하여 오토컴플릿 기능을 구현하고 있습니다. 컴포넌트의 상태로서 inputValue를 관리하고, 이 값을 useAutocomplete Hook에 전달하여 옵션들을 받아옵니다. 그 후, 입력값을 업데이트하면서 옵션들을 출력하는 기본적인 검색 컴포넌트를 구현하였습니다.

사용 예시

위에서 구현한 SearchComponent 컴포넌트는 다음과 같이 사용할 수 있습니다.

import React from 'react';
import SearchComponent from './SearchComponent';

const App = () => {
  return (
    <div>
      <h1>오토컴플릿 검색</h1>
      <SearchComponent />
    </div>
  );
};

export default App;

위의 예시에서는 SearchComponent를 App 컴포넌트에서 사용하고 있습니다. SearchComponent를 렌더링하면 화면에는 입력 창과 오토컴플릿 결과가 나타날 것입니다.

마무리

이와 같이 Custom Hook을 활용하여 오토컴플릿 기능을 구현할 수 있습니다. Custom Hook은 React 애플리케이션에서 재사용 가능한 로직을 모듈화하여 코드를 깔끔하게 유지하는 데 도움을 줍니다. 적절하게 Custom Hook을 활용하면 애플리케이션의 유지보수성과 확장성을 향상시킬 수 있습니다.

#React #CustomHook