Custom Hook을 활용한 자동완성 기능 구현
소개
자동완성 기능은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자가 입력한 내용을 기반으로 가능한 결과를 빠르게 제공하여 사용자 경험을 향상시킵니다. 이번 포스트에서는 React의 Custom Hook을 활용하여 자동완성 기능을 구현하는 방법을 알아보겠습니다.
Custom Hook으로 자동완성 기능 구현하기
자동완성 기능을 구현하기 위해서는 사용자가 입력한 값에 따라 결과를 필터링하고 표시해야 합니다. 이 과정은 React의 Custom Hook으로 추상화하여 재사용성을 높일 수 있습니다.
1. useAutocomplete Custom Hook 생성
import { useState } from 'react';
export function useAutocomplete(options) {
const [value, setValue] = useState('');
const [suggestions, setSuggestions] = useState([]);
const handleChange = (event) => {
const inputValue = event.target.value;
setValue(inputValue);
const filteredSuggestions = options.filter((option) =>
option.toLowerCase().startsWith(inputValue.toLowerCase())
);
setSuggestions(filteredSuggestions);
};
return {
value,
suggestions,
handleChange,
};
}
2. Custom Hook 사용하기
import { useAutocomplete } from './useAutocomplete';
const options = ['apple', 'banana', 'cherry', 'grape', 'mango'];
function Autocomplete() {
const { value, suggestions, handleChange } = useAutocomplete(options);
return (
<div>
<input
type="text"
value={value}
onChange={handleChange}
/>
<ul>
{suggestions.map((suggestion) => (
<li key={suggestion}>{suggestion}</li>
))}
</ul>
</div>
);
}
결론
React의 Custom Hook을 활용하여 자동완성 기능을 구현하는 방법에 대해 알아보았습니다. Custom Hook 사용을 통해 코드의 재사용성을 높이고 개발 효율성을 높일 수 있습니다. 이제 구현한 자동완성 기능을 원하는 곳에서 적용하여 사용자들의 경험을 향상시켜보세요.