많은 웹 애플리케이션에서 사용자가 입력한 텍스트를 기반으로 키워드를 추천하는 기능이 필요합니다. 이를 위해 Custom Hook을 활용하여 키워드 추천 기능을 추가하는 방법을 알아보겠습니다.
Custom Hook이란?
Custom Hook은 React에서 컴포넌트 로직을 재사용하기 위한 기능입니다. 다양한 컴포넌트에서 공통적으로 사용되는 로직을 분리하여 재사용할 수 있게 해줍니다. 이를 통해 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있습니다.
키워드 추천 기능 추가하기
키워드 추천 기능을 추가하기 위해 다음과 같은 스텝을 따라갑니다.
1. useKeywordSuggestions Custom Hook 만들기
먼저, useKeywordSuggestions라는 Custom Hook을 만들어야 합니다. 이 Hook은 입력된 텍스트를 기반으로 키워드를 추천하는 로직을 포함합니다. 다음과 같이 코드를 작성해봅시다.
import { useState, useEffect } from 'react';
const useKeywordSuggestions = (inputText) => {
const [suggestions, setSuggestions] = useState([]);
useEffect(() => {
// 입력된 텍스트를 기반으로 키워드 추천 API를 호출하고 결과를 받아옵니다.
const fetchSuggestions = async () => {
// API 호출 및 결과 처리 로직 작성
};
fetchSuggestions(); // 컴포넌트가 마운트되거나 입력 텍스트가 변경될 때마다 호출됩니다.
}, [inputText]);
return suggestions;
};
export default useKeywordSuggestions;
2. 컴포넌트에 Custom Hook 적용하기
다음으로, 키워드 추천 기능을 적용하고자 하는 컴포넌트에서 Custom Hook을 적용합니다.
import React, { useState } from 'react';
import useKeywordSuggestions from './useKeywordSuggestions';
const KeywordSuggestions = () => {
const [inputText, setInputText] = useState('');
const suggestions = useKeywordSuggestions(inputText);
return (
<div>
<input
type="text"
value={inputText}
onChange={(e) => setInputText(e.target.value)}
/>
<ul>
{suggestions.map((suggestion) => (
<li key={suggestion}>{suggestion}</li>
))}
</ul>
</div>
);
};
export default KeywordSuggestions;
3. 컴포넌트에서 API 호출 및 결과 처리 로직 작성하기
마지막으로, useKeywordSuggestions Custom Hook 안에서 API 호출 및 결과 처리 로직을 작성합니다. 이 부분은 특정 API를 호출하고 결과를 받아오는 방식에 따라 다를 수 있습니다. 예를 들어, axios나 fetch를 이용하여 API를 호출하고 받아온 결과를 setSuggestions를 통해 업데이트할 수 있습니다.
import axios from 'axios';
const useKeywordSuggestions = (inputText) => {
const [suggestions, setSuggestions] = useState([]);
useEffect(() => {
const fetchSuggestions = async () => {
const response = await axios.get(`API_URL?inputText=${inputText}`);
const data = response.data;
setSuggestions(data);
};
if (inputText) {
fetchSuggestions();
} else {
setSuggestions([]);
}
}, [inputText]);
return suggestions;
};
위와 같이 Custom Hook을 작성하고 컴포넌트에 적용함으로써 키워드 추천 기능을 추가할 수 있습니다.
결론
Custom Hook을 활용하여 키워드 추천 기능을 추가하는 방법에 대해 알아보았습니다. Custom Hook을 적절히 활용하면 애플리케이션의 코드를 깔끔하게 유지하고 재사용 가능한 로직을 구성할 수 있습니다. 향후 더 많은 컴포넌트에서 이러한 Custom Hook을 활용하여 기능을 개선해볼 수 있습니다.