🧭 71. React Native에서 앱 내 검색 기능 구현 전략 — 인풋 디바운싱, 필터링, 섹션 리스트까지

---

앱을 만들다 보면 유저 리스트, 상품 목록, 게시글 등에서 검색 기능이 꼭 필요해진다.
처음에는 단순히 TextInput 하나 넣고 includes()로 필터링만 하면 될 줄 알았는데,
막상 사용자 입장에서 생각해보니 검색은 생각보다 신경 써야 할 포인트가 많았다.

이번 글에서는 내가 실제로 검색 기능을 구현하면서 겪었던
검색 인풋 처리, 디바운싱, 필터링, 섹션 리스트, 최근 검색어 저장까지의 과정을 정리해본다.

---

✅ 검색 기능이 중요한 이유

항목	설명
UX 향상	원하는 정보를 빠르게 찾을 수 있어야 앱 만족도가 올라간다
데이터 많을수록 필수	수십 개 이상의 리스트에서는 검색 없이는 탐색이 어렵다
실시간 반응	검색어에 따라 실시간으로 결과가 바뀌는 경험이 중요하다

---

🔍 기본 검색 구현 (TextInput + filter)

const [query, setQuery] = useState('');
const [filteredData, setFilteredData] = useState(data);

useEffect(() => {
  const newData = data.filter(item => item.name.includes(query));
  setFilteredData(newData);
}, [query]);

<TextInput
  value={query}
  onChangeText={setQuery}
  placeholder="검색어를 입력하세요"
/>

• 이건 정말 기본적인 방식인데, 입력할 때마다 바로 필터링되기 때문에
  데이터가 많아질수록 성능 이슈가 생길 수 있다.

---

⏳ 디바운싱 처리로 최적화

입력이 바뀔 때마다 필터링하면 너무 자주 연산이 발생한다.
그래서 디바운싱을 통해 입력이 잠시 멈췄을 때만 필터링하도록 만들었다.

디바운스 훅 만들기

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

적용

const debouncedQuery = useDebounce(query, 300);

useEffect(() => {
  const newData = data.filter(item => item.name.includes(debouncedQuery));
  setFilteredData(newData);
}, [debouncedQuery]);

• 이렇게 하면 검색어가 멈췄을 때만 필터링이 일어나서 성능이 좋아졌다.

---

📦 섹션 리스트로 정리된 검색 결과 만들기

데이터가 많은 경우, 예를 들어 유저 이름이 가나다순으로 되어 있거나
날짜 기준으로 나뉜다면 SectionList가 꽤 유용하다.

<SectionList
  sections={filteredSections}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
/>

• 섹션별로 정리하면 결과가 더 보기 좋아지고, UX도 향상된다.
• 데이터는 이렇게 구성한다:

const filteredSections = [
  {
    title: 'A',
    data: [{ id: '1', name: 'Alex' }, { id: '2', name: 'Amber' }],
  },
  {
    title: 'B',
    data: [{ id: '3', name: 'Ben' }],
  },
];

---

🔁 최근 검색어 저장 (AsyncStorage)

사용자가 검색했던 내용을 저장해두면 편의성이 올라간다.
React Native에선 AsyncStorage를 활용할 수 있다.

import AsyncStorage from '@react-native-async-storage/async-storage';

const saveSearch = async (keyword: string) => {
  const prev = await AsyncStorage.getItem('recent_keywords');
  const parsed = prev ? JSON.parse(prev) : [];
  const updated = [keyword, ...parsed.filter(k => k !== keyword)].slice(0, 10);
  await AsyncStorage.setItem('recent_keywords', JSON.stringify(updated));
};

• 최대 10개까지 최근 검색어 저장
• 중복 방지, 최신 순 정렬

검색 실행 시 saveSearch(query)만 호출하면 된다.

---

🧠 실전에서 느낀 점

처음에는 단순하게 문자열 포함 여부만 체크했는데,

• 검색 결과가 늦게 뜨거나
• 연속 입력 시 렉이 생기고
• 최근 검색어가 안 남아서 불편하다는 피드백이 들어왔다.

그래서 디바운싱, 섹션 리스트, 저장까지 하나씩 개선했다.
특히 useDebounce는 어디든 쓸 수 있어서 지금은 공통 훅으로 빼서 쓰고 있다.

---

🔍 검색은 단순한 기능 같지만, 작은 디테일이 전체 UX를 바꾼다.

---