이 글은 Rails, Stimulus, Turbo를 활용한 검색 폼 구현을 다음 네 가지 주요 구성 요소로 설명합니다.

1. 검색 폼 (The Form)

• form_with 헬퍼를 사용하여 items_path로 GET 요청을 보내는 검색 폼을 생성합니다.

• data: { controller: "search", turbo_frame: "items_list" } 속성을 통해 Stimulus search 컨트롤러와 items_list Turbo Frame에 연결됩니다.

• 텍스트 필드(f.text_field :query)는 search_target: "input"과 `action: “input->search

search”를 통해 Stimulus 컨트롤러의 search` 액션을 트리거합니다.

• 숨겨진 초기화 버튼(clearButton)은 `click->search

clear` 액션을 통해 입력 필드를 비우는 기능을 제공합니다.

2. Stimulus 컨트롤러 (The Stimulus Controller)

• static targets = ["input", "clearButton"]을 통해 입력 필드와 초기화 버튼에 접근합니다.

• connect(): 컨트롤러 연결 시 toggleClear()를 호출하여 초기화 버튼의 가시성을 설정합니다.

• search(): 입력 발생 시 호출되며, 기존 디바운스 타이머를 초기화하고 300ms 후 this.element.requestSubmit()을 통해 폼을 제출합니다. 이는 과도한 서버 요청을 방지하는 디바운스 로직입니다.

• clear(): 초기화 버튼 클릭 시 입력 필드를 비우고, toggleClear()를 호출한 후 폼을 제출합니다.

• toggleClear(): 입력 필드에 값이 있을 경우 초기화 버튼을 표시하고, 값이 없을 경우 숨깁니다.

3. Turbo Frame (The Turbo Frame)

• turbo_frame_tag "items_list"는 검색 결과 목록을 감싸는 역할을 합니다.

• Stimulus 컨트롤러가 폼을 제출하면, 이 items_list 프레임 내부의 콘텐츠만 새로운 검색 결과로 교체됩니다. 이는 전체 페이지 새로고침 없이 검색 결과를 효율적으로 업데이트하는 핵심 메커니즘입니다.

4. Rails 컨트롤러 (The Rails Controller)

• index 액션은 params[:query]의 존재 여부에 따라 검색 로직을 수행합니다.

• params[:query]가 있을 경우 Item.where("name LIKE ?", "%#{params[:query]}%")를 사용하여 이름 필드를 기준으로 아이템을 필터링합니다.

• 쿼리가 없을 경우 Item.all을 반환하여 전체 아이템 목록을 표시합니다.