📌 TIL - React 검색 필터링 동작 원리

1. 오늘 배운 것: 핵심 개념 요약

React에서 검색 필터링은
input → state 변경 → 컴포넌트 재실행 → filter 재계산 → UI 갱신
구조로 동작한다.

filter 함수를 직접 호출하지 않아도
state가 바뀌면 컴포넌트가 다시 실행되면서 자동으로 필터링이 적용된다.

---

2. 상세 내용: 코드 예시와 함께 설명

const [searchQuery, setSearchQuery] = useState("");

<input
  value={searchQuery}
  onChange={(e) => setSearchQuery(e.target.value)}
/>;

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

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

사용자가 input에 값을 입력하면 onChange 이벤트가 실행되고
setSearchQuery()가 호출되면서 state가 변경된다.

state가 변경되면 컴포넌트 함수가 다시 실행되고,
그 안에 있는 filter() 로직이 다시 계산된다.

그 결과 filteredTemplates 값이 달라지고
map()을 통해 렌더링되는 UI가 자동으로 갱신된다.

---

3. 어려웠던 점: 겪은 문제와 해결 과정

처음에는 filter를 직접 호출하지 않았는데
왜 검색 결과가 자동으로 바뀌는지 이해가 되지 않았다.

또한 includes()가 대소문자를 구분한다는 점을 몰라
검색이 정상적으로 되지 않는 문제를 겪었다.

문제 해결 과정에서 React의 핵심은
“함수형 컴포넌트는 state가 바뀌면 다시 실행된다”는 점이라는 걸 다시 정리했다.

---

4. 느낀 점: 개인적인 소감

이번 내용을 통해 React는 DOM을 직접 조작하는 방식이 아니라
상태 기반으로 UI를 재계산하는 구조라는 점을 다시 체감했다.

단순한 검색 기능도 렌더링 흐름을 이해하지 못하면 헷갈릴 수 있다.
앞으로는 state → render 흐름을 먼저 떠올리며 설계해야겠다.