[React] 실시간 검색 기능을 없앤 이유, 검색 상태를 URL에 저장하여 해결하기

라이북러리 프로젝트에서 가장 핵심적인 기능은 도서 검색이다. 사용자가 도서 검색을 하는 데 불편함이 없도록 가장 많은 노력을 쏟아 부었다.

사용성을 높이기 위해 넣은 기능 중 하나가 실시간 검색이다.

debounce를 사용해 검색 버튼을 클릭하지 않아도 자동으로 검색어에 따른 결과 API를 호출하였다.

이것은 사용자의 동작을 한 단계 줄여 더욱 간편하게 검색할 수 있는 장점이 있다.

하지만 한 가지 단점이 있다. 바로 히스토리가 기록되지 않는 것이다. 검색어에 대한 결과 도서를 클릭하면 상세 페이지로 이동하고 뒤로가기를 하면 검색한 단어가 계속 유지되길 바라지만, 검색어가 빈 값으로 초기화된 상태로 돌아간다.

이러한 문제를 해결하기 위해 실시간 검색 방식을 없애고 URL에 검색 상태를 저장하는 방식으로 수정하였다.

사용자가 자바스크립트를 검색하고 검색 버튼을 클릭하면 localhost:3000/search/자바스크립트 페이지로 이동하여 결과가 나타난다.

도서 상세페이지에서 뒤로가기하면 위 URL로 이동하기 때문에 검색 결과 값이 초기화되지 않은 상태가 된다.

URL로 검색 상태를 관리하여 얻을 수 있는 장점은 여기서 끝이 아니다.

URL에 상태를 포함시키면 사용자가 현재 검색 결과 상태를 쉽게 공유할 수 있다.

검색 엔진 크롤러는 URL을 기반으로 콘텐츠를 인덱싱한다. 이렇게 URL에 검색 상태를 포함시키면 웹크롤러가 페이지를 쉽게 분석할 수 있으므로 검색 엔진 최적화(SEO)에 도움이 된다.

이렇게 검색 기능을 수정하였다. 하지만 또 다른 문제가 발생하였다. 이 문제를 해결하는 과정은 다음 포스트로 이어서 작성하도록 하겠다!