[NEXT JS] encodeURIComponent()

▶︎ 목표

검색창에 입력한 입력값을 문제없이 검색결과창에 띄우기.

🧗🏻‍♀️ 문제

검색 페이지에서 입력한 검색어를 쿼리로 검색 결과 페이지로 넘겨준다.
검색어에 # 이나 ? 이 포함된 경우, 해당 특수문자 이후로는 짤려서 쿼리가 넘어간다.

---

  const [searchValue, setSearchVaule] = useState("");

  const goToResult = () => {
   		router.push(`/search/${searchValue}`)    	
      }

---

---

검색창에 입력한 값은 url에 있는 것과 같이 !@#%!^%!@# 이다.
그러나 화면에 찍히는 값은 딱 !@ 만 찍히는 이슈가 생긴 것이다.
다른 모든 검색어는 제대로 잘 넘어오는데 특정 특수문자만 입력하면 짤려서 나오는 것이다.

처음에는 인코딩 문제라고 생각을 못했다.
그 이유는 url에는 값이 찍히니까..!

💡 해결

🔺 encodeURIComponent 적용

쿼리로 넘기기 전에 인코딩을 해야 한다.!

URL은 공백이나 슬래시와 같은 많은 특수 문자를 허용하지 않는다.
그래서 해당 특수 문자를 인코딩해야 한다.

인코딩 하는데에는 encodeURI()와 encodeURIComponent()가 있다.

URL 구성 요소(쿼리 문자열 매개변수)에 넣을 문자열을 인코딩하는 경우에는 쿼리에만 encodeURIComponent()를 사용한다.

왜냐면 encodeURIComponent()는 / ? : @ & = + $ # 까지 인코딩 하기 때문에 url 주소 전부 다 인코딩을 해버리면 https://의 슬래쉬까지 인코딩 해버리기 때문이다.!

• encodeURI()를 안 쓴 이유는 상기에 언급한 것과 같이 인코딩을 안하는 특수문자가 있기 때문이다.!

  const [searchValue, setSearchVaule] = useState("");

  const goToResult = () => {
    const queryEncode = encodeURIComponent(searchValue)
   		router.push(`/search/${queryEncode}`)    	
      }

---

---