MenuMate 검색 상태, 로직 담당 컴포넌트 SearchSection 설계

 

SearchBar는 프레젠테이셔널 컴포넌트입니다. 검색 상태와 제출 로직을 담당하는 컴포넌트인 SearchSection을 설계한 과정을 정리한 글입니다. 

 

검색 상태

 

• inputValue: 입력 중인 값
• submittedKeyword: 검색 확정값(공백 제거된 값만 들어간다는 규칙 두기)
• results: 검색 결과 목록
• isLoading: 현재 검색 요청이 진행 중인지 나타냄
• error: 검색 실패 시 보여줄 에러 상태( 문자열 또는 null 구조로 두기)

 

상태 흐름 설계

1단계: 사용자가 입력

• inputValue 변경

2단계: 사용자가 제출

• inputValue.trim() 수행
• 빈 문자열이면 종료
• 아니면 submittedKeyword 업데이트

3단계: 확정된 검색어 감지

• submittedKeyword가 바뀜
• 검색 실행 시작

4단계: 검색 시작 처리

• isLoading = true
• error = null

5단계: 검색 결과 수신

• 성공 → results 저장
• 실패 → error 저장

6단계: 종료 처리

• isLoading = false

 

검색 실행 책임을 어디에 둘지?

 

handleSubmit이 직접 검색하지 않고, submittedKeyword가 바뀌는 것을 기준으로 검색이 실행되는 구조를 생각하고 있습니다. 

handleSubmit의 책임

• 입력값 trim
• 빈 값 검사
• 검색어 확정 (submittedKeyword 갱신)

검색 실행 로직의 책임

• 확정된 검색어를 바탕으로 요청 실행
• 결과 / 로딩 / 에러 상태 갱신

 

SearchSection의 역할

 

• inputValue 관리
• submittedKeyword 관리
• results 관리
• isLoading 관리
• error 관리
• SearchBar 렌더링
• 검색 결과 상태 분기 렌더링