React 앱에서 사용자 입력 예측(Auto-complete) 시스템 구현

React로 사용자 경험을 향상시키는 대표적인 기능 중 하나가 바로 입력 예측, 즉 Auto-complete 시스템입니다. 이 글에서는 간단하면서도 실용적인 React Auto-complete 구현 방법을 단계별로 소개합니다.

1. 기본 아이디어와 준비

Auto-complete는 사용자가 입력한 텍스트를 기반으로 관련된 추천 단어들을 실시간으로 보여주는 기능입니다. 이를 위해 입력값 상태 관리와 추천 리스트 필터링이 필요합니다.

2. 기본 컴포넌트 구조 설계

AutoComplete 컴포넌트를 만들어 내부에 입력 필드와 추천 리스트를 관리합니다. 추천 데이터는 미리 준비한 배열로 처리할 수 있고, API 호출과 연결해도 무방합니다.

3. 코드 예제

import React, { useState } from 'react';

const items = [
  'apple', 'banana', 'grape', 'orange', 'pineapple', 'strawberry', 
  'watermelon', 'blueberry', 'kiwi', 'mango'
];

function AutoComplete() {
  const [input, setInput] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const onChangeHandler = (e) => {
    const value = e.target.value;
    setInput(value);

    if (value.length > 0) {
      const regex = new RegExp(`^${value}`, 'i');
      const filtered = items.filter(item => regex.test(item));
      setSuggestions(filtered);
    } else {
      setSuggestions([]);
    }
  };

  const onSuggestionClick = (value) => {
    setInput(value);
    setSuggestions([]);
  };

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={onChangeHandler}
        placeholder="입력하세요..."
      />
      {suggestions.length > 0 && (
        <ul>
          {suggestions.map((item, index) => (
            <li
              key={index}
              onClick={() => onSuggestionClick(item)}
              style={{ cursor: 'pointer' }}
            >
              {item}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default AutoComplete;

4. 추가 팁

- API에서 데이터를 받아올 경우, 디바운스(debounce)를 적용해 서버 요청 부담을 줄이세요.

- 키보드 방향키 탐색 및 엔터 입력 선택 기능을 추가하면 UX가 한층 좋아집니다.

- 스타일링을 추가해 컴포넌트 UI를 개선하면 더 매력적인 인터페이스를 만들 수 있습니다.

이처럼 React에서는 상태와 이벤트 핸들러를 적절히 활용해 쉽고 빠르게 입력 예측 기능을 구현할 수 있습니다. 실제 프로젝트에 맞게 확장 및 최적화하며 활용해 보세요.