MenuMate 검색 기능 설계 1차 결론

설계와 기획이 부족한 상태에서 코드부터 쳤을 경우, 나중에 수정할 사항이 많이 나오거나 구현 자체를 잘못된 방향으로 한 경험이 있기에 이번 사이드 프로젝트는 설계와 기획을 꼼꼼하게 하고 기록하는 연습을 겸하고 있습니다.

이번 글에서는 검색 기능 설계에 대한 1차 결론을 정리한 글입니다.

 

구조

• SearchBar: 프레젠테이셔널 컴포넌트
• 상위 컨테이너: 상태와 검색 로직 담당

상태

• inputValue: 현재 입력값
• submittedKeyword: 실제 검색 실행값
• 이후 results, isLoading, error 처리

이벤트

• onChange: 입력값 변경
• onSubmit: 공백 검사 후 검색 실행

방향

• 먼저 제출형 검색만 구현
• 자동완성/연관검색어는 이후 확장

SearchBar가 가질 props들

*SearchBar 자체는 현재 입력값을 보여주고, 입력 변화 이벤트를 올려 보내고, 제출 이벤트를 올려 보내는 역할

 

• value - input에 표시할 현재 값
• onChange - 사용자가 input 값을 바꿨을 때 상위에 알려주는 함수
• onSubmit - 사용자가 Enter를 누르거나 검색 버튼을 눌렀을 때 실행할 함수