검색창에 입력한 입력값을 문제없이 검색결과창에 띄우기.
검색 페이지에서 입력한 검색어를 쿼리로 검색 결과 페이지로 넘겨준다.
검색어에 #
이나 ?
이 포함된 경우, 해당 특수문자 이후로는 짤려서 쿼리가 넘어간다.
const [searchValue, setSearchVaule] = useState("");
const goToResult = () => {
router.push(`/search/${searchValue}`)
}
검색창에 입력한 값은 url에 있는 것과 같이 !@#%!^%!@#
이다.
그러나 화면에 찍히는 값은 딱 !@
만 찍히는 이슈가 생긴 것이다.
다른 모든 검색어는 제대로 잘 넘어오는데 특정 특수문자만 입력하면 짤려서 나오는 것이다.
처음에는 인코딩 문제라고 생각을 못했다.
그 이유는 url에는 값이 찍히니까..!
쿼리로 넘기기 전에 인코딩을 해야 한다.!
URL은 공백이나 슬래시와 같은 많은 특수 문자를 허용하지 않는다.
그래서 해당 특수 문자를 인코딩해야 한다.
인코딩 하는데에는 encodeURI()
와 encodeURIComponent()
가 있다.
URL 구성 요소(쿼리 문자열 매개변수)에 넣을 문자열을 인코딩하는 경우에는 쿼리에만 encodeURIComponent()
를 사용한다.
왜냐면 encodeURIComponent()
는 / ? : @ & = + $ #
까지 인코딩 하기 때문에 url 주소 전부 다 인코딩을 해버리면 https://
의 슬래쉬까지 인코딩 해버리기 때문이다.!
encodeURI()
를 안 쓴 이유는 상기에 언급한 것과 같이 인코딩을 안하는 특수문자가 있기 때문이다.! const [searchValue, setSearchVaule] = useState("");
const goToResult = () => {
const queryEncode = encodeURIComponent(searchValue)
router.push(`/search/${queryEncode}`)
}