MenuMate 검색창 기능 설계, 컴포넌트의 책임 분리 고민 사항

 

검색창 UI를 1차적으로 완성시킨 후, 검색창 기능 설계에 앞서 고민한 점과 정리해둔 사항을 정리하는 글입니다.

 

기능 설계 단계에서 해야할 일

 

1. input을 실제 값과 연결

입력값 상태를 어디서 관리할지 고민했습니다. 검색창 UI가 상태를 가질지 검색창이 value, onChange, onSubmit같은 props를 받을지 결정해야 했습니다.

고민 결과, 관심사 분리 측면 및 유지 보수 측면을 생각했을 때 상위 페이지가 상태를 관리하는 방식이 적절하다고 판단했습니다.

 

2. submit 동작 정의

버튼 클릭과 Enter 입력을 따로 처리하지 말고 하나로 통합하는 방식을 생각했습니다.

 

3. 검색어를 어디에 전달할지 정하기

 

개발 단계에서는 콘솔로 확인할 수 있게 해두고 최종적으로는 상위 페이지로 전달하는 방식을 생각했습니다.

 

4.빈값 어떻게 처리할지 정하기

빈 문자열이면 검색하지 않을지, 공백만 입력한 경우는 막을지 trim() 기준으로 판단할지 정해야 할 것입니다.

빈 문자열이면 검색하지 않고 trim()처리 하는 것이 좋겠다고 생각했습니다.

 

5. placeholder와 props 연결

placeholder props와 arialLabel props를 반영할 것입니다.

 

6. clear버튼(x) 방향 결정

현재는 type="search" 으로 해둬서 브라우저 기본 clear UI가 적용되어 있습니다. 이걸 유지할 지 아니면 별도의 clear 버튼을 구현하고 적용할지 고민했습니다.

clear버튼 구현에 집중하기 보다는 검색 기능에 집중하는 것이 좋을 듯해 일단 기본 clear UI를 유지하기로 했습니다.

 

7. 검색 후 동작 정의

검색 결과 페이지로 이동할지, 같은 페이지에서 리스트를 갱신할지, URL 쿼리스트링에 검색어를 반영할지 고민했습니다. 일단 현재 검색 기능 구현 단계에서는 검색어를 제출하고 상위에 전달하는 단계까지만 구현하는 것을 목표로 했습니다.

 

 

컴포넌트 책임 분리에 관한 정리

 

SearchBar(이전에 만든 검색창UI 컴포넌트)의 역할

 

• input 보여주기
• 현재 value 표시
• 입력 이벤트 전달
• submit 이벤트 전달

SearchBar는 입력받고 제출 이벤트를 발생시키는 UI 까지만 책임집니다. API호출, 결과 리스트 변경, 라우팅 같은 로직은 다른 컴포넌트에서 담당합니다.

 

 

상위 컨테이너의 역할

 

• searchValue 상태 관리
• onChange 처리
• onSubmit 처리
• 필요하다면 API 호출
• 결과 상태 관리
• 로딩 / 에러 / 빈 결과 처리

현재 상위 컨테이너(page나 검색 기능 전용 컴포넌트)는 실제 검색 기능을 담당하도록 고려하고 있습니다.