홈페이지에서 검색어를 입력하면
search 페이지로 쿼리 스트링과 함께 이동하도록 하기
1. components폴더에 SearchForm.js파일을 만든다.
State를 하나 만들고 input태그에서 입력하는 값을 반영하도록 하였다.
form 태그에서 검색 버튼을 누르면
submit이벤트가 발생해서 handleSubmit함수를 실행한다.form태그의 기본 동작은 쿼리스트링과 함께 페이지를 이동하는 것인데
Next.js를 사용해서 페이지를 이동할 것이기 때문에
preventDefault로 기본동작을 막아준다.
2. router객체를 useRouter Hook에서 가지고 온다
router의 push라는 함수를 사용하여 이동할 주소를 넘겨주면된다.
3. index.js와 search.js에 적용해본다.
4. 검색창에 검색한 것이 남아있도록 하기
initialValue를 만들고
search.js에서 searchForm에 initialValue를 {q}값으로 내려준다.
5. 검색어가 없을 때는 페이지로 이동하기
만약에 value값이 없으면 홈페이지로 이동한다.
