[개발일기] 검색결과 까지 표출하고 싶어요!

자유게시판 프로젝트를 진행하면서, 검색기능은 붙였는데, 검색어를 입력하자마자 바로 검색되는 것이 아닌

버튼을 눌렀을때 검색이 되는 방식으로 변경하고싶었고, 또한 전체 글에서 그 키워드가 몇건 검색됐는지도 표출시키고 싶었다...

 

✨삽질의 시작✨

 

멘토님의 코드

이미 내 코드는 수정 후인지라, 원본이라고 하자면.. 멘토님의 코드인데 멘토님의 코드를 리뷰해보자면 

검색 input box에 onChange event가 일어나면 debounce가 되면서 리패치가 되고 onChangeKeyword로 데이터를 넘겨주는 형식인데. 이런 방식이라면 검색 inputbox에 입력을 한 후 .2초 뒤 검색결과가 리스트에 표출되게 된다.

 

하지만 난..버튼을 눌러서 검색하고싶은걸 ㅠ...

내 코드

그래서 변경한 방식이 이것이다.

SearchData 라는 변수를 하나 선언한뒤, onChangeSearchBar가 실행될 때, value를 SearchData에 담아준뒤,

onClickSearch가 실행될때 debounce가 SearchData 값을 받아 실행되게 나눠주었다.

 

이렇게 보면 참 삽질을 얼마 안한거 같지만 거의 2시간 반? 세시간을 삽질해서 찾아내었다...

이것저것 시도해봤지만 이게 최선이라 이게 정말 최선일지는...멘토님한테 여쭤보는걸로 ㅠ..

 

검색버튼 눌러서 검색하는 건 어찌 해결은 했고

 

검색결과를 표출하는 것은 따로 멘토님의 코드에는 없기때문에 추가하기로 했다

이건 매우매우 간단해서 삽질이라고 할것조차 없었음..

 

SearchResult 넣어주기

만약 SearchResult를 계속 보이는 형식으로 두면 그 영역을 계속 먹고있기 때문에 emotion에서 props.로 제어해주기로 했다.

 

적용결과

검색한 결과가 몇개인지 어떤 키워드였는지 아주 잘 보여줌!!!!!😤