🚧 Trouble Shooting - 검색 필터가 동작하지 않던 문제

1. 문제 상황

React에서 검색 기능을 구현했지만
input에 값을 입력해도 리스트가 필터링되지 않는 문제가 발생했다.

검색어를 입력해도 모든 데이터가 그대로 보였고,
특정 키워드를 입력해도 원하는 결과가 나오지 않았다.

---

2. 원인 분석

① 대소문자 구분 문제

template.title.includes(searchQuery)

includes()는 대소문자를 구분하기 때문에
"React"와 "react"는 서로 다른 문자열로 처리되었다.

---

② 공백 처리 문제

검색어가 공백이거나 빈 문자열일 때
조건문이 명확하지 않아 필터가 예상과 다르게 동작했다.

---

3. 해결 과정

🔹 대소문자 통일

template.title
  .toLowerCase()
  .includes(searchQuery.toLowerCase());

---

🔹 공백 제거 처리

if (!searchQuery.trim()) return true;

---

4. 최종 코드

const filteredTemplates = templates.filter((template) => {
  if (!searchQuery.trim()) return true;

  return template.title
    .toLowerCase()
    .includes(searchQuery.trim().toLowerCase());
});

---

5. 배운 점

• includes()는 기본적으로 대소문자를 구분한다.
• 검색 기능에서는 trim() 처리가 중요하다.
• React는 state 변경 시 컴포넌트를 다시 실행한다는 점을 항상 고려해야 한다.

---

6. 느낀 점

작은 기능이라도 문자열 처리와 렌더링 흐름을 정확히 이해하지 못하면
예상치 못한 문제가 발생할 수 있다는 걸 느꼈다.

앞으로는 조건 흐름을 먼저 정리한 뒤 구현하는 습관을 가져야겠다.