검색창 만들기
검색어를 입력하고 enter키를 누르거나 검색 버튼을 누르면
예) 검색어: react
페이지 주소 뒤에 ?keyword=react 붙여서 이동하고
페이지에서는 검색된 결과를 보여주는 것을 만들 것이다.
여기서 ? 뒷 부분은 쿼리 스트링이라고 부르는 것이다.
주소에서 추가적인 조건을 넣을 때 사용하는 것이다.
CourseListPage 컴포넌트를 보면
form 태그에 검색창이 있다. input태그에는
name값을 keyword라고 지정해두었다.
form 태그의 기본 동작은 enter키나 submit버튼을 누르면
쿼리와 함께 페이지를 이동하는 것이다.이것을 수정해서 검색 결과를 보여줄 것이다.
getCourses라는 함수를 보면 검색어에 해당하는 keyword를 파라미터로 갖는다.
CourseListPage 컴포넌트에서 주소창에 있는 쿼리 파라미터를 가지고 와서
getCourses함수에 넘겨주면 검색결과를 보여줄 수 있다.
useSearchParams라는 리액트라우터에서 제공하는 커스텀 훅을 사용할 것이다.
리액트 라우터에서는 쿼리 파라미터 값을 가져오고 싶을 때
useSearchParams라는 훅을 사용할 수 있다.
useState와 사용하는 형태가 비슷하다.차이점은 State 값에 해당하는 부분은 searchParams 객체라는 점이다.
searchParams 객체에서는
get 함수를 통해서 안에 있는 객체를 가져올 수 있다.'keyword'파라미터 값을 콘솔로 확인해보면
/courses에서는 null 값이 출력되고
?keyword=react한 주소로 들어가보면 react라는 값이 출력된다.
그럼 이 키워드 쿼리 파라미터의 값을 initKeyword라는 변수에 넣고
keyword State의 초기값과 getCourses함수의 파라미터로 넘겨준다.
그리고 여기 keyword State는 input에다가 value로 내려줄 것이기 때문에
반드시 문자열이어야한다.initKeyword 값이 없는 경우에는 빈 문자열을 넣어준다.
저장하고 확인해보면
keyword 쿼리 파라미터가 react인 경로에서는 react로 검색한 결과가 잘 보이고
검색어도 react로 잘 채워져있다.
다른 검색어로 바꿔보면 마찬가지로 잘 동작하는 것을 확인할 수 있다.
입력폼을 submit했을 떄 주소창에 있는 쿼리 스트링을 바꿔보겠다.
form 태그에서 onSubmit라는 prop으로 구현하면 된다.onSubmit에 handleSubmit라는 함수를 내려주고
handleSubmit 함수에서는 이벤트 객체를 받아서
일단 preventDefault라는 함수를 실행해준다.이렇게 하면 Submit를 했을 떄 웹브라우저가 저절로 페이지를 이동하지 않는다.
그리고 setSearchParams라는 함수를 실행하는데
이 함수는 파라미터로 객체를 받는다.
여기에 원하는 쿼리 파라미터를 객체의 프로퍼티로 넘겨주면 된다.
keyword라는 쿼리 파라미터의 값이 지정된다.
그런데 keyword의 값이 없으면 쿼리 파라미터로 null값이 지정되면 안되므로
keyword State값에 따라서 State값이 없으면 빈 객체로 넘겨준다.
이렇게 하면 폼태그가 submit되었을 때 handleSubmit 함수가 실행되고
기본 동작대신에 setSearchParams함수를 통해서 쿼리 파라미터의 값이 변경될 것이다.
마지막으로 courses의 갯수가 하나도 없을 때 경고 메세지를 보여주는데
경고 메세지를 읽어보면 검색결과가 없다는 것을 알려주는 것이므로
여기 검색어가 있을 떄 조건을 추가해주면된다.
이렇게 하면 검색어가 있을 떄 검색된 결과가 없으면
경고 메세지를 보여주게 된다.
