NextJs로 searchBar만들기(with useSearchParams)

Mincho·2023년 6월 14일

nextjs searchbar typescript useSearchParams

[NextJs]

목록 보기

6/12

🔴 searchBar를 만들어보자.

//Header.tsx
const Header = () => {
 const submitHandler = (e: React.FormEvent<HTMLFormElement> | any) => {
    e.preventDefault();

    router.push(`/search/${keyword}`);
  };

  return(
    	<InputGroup
              as="form"
              marginRight="10px"
              onSubmit={(e) => submitHandler(e)}
            >
              <Input
                placeholder="아이돌을 검색해보세요."
                fontSize="0.9rem"
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                  const keyword = e.target.value;
                  setKeyword(keyword);
                }}
              />
              <Button type="submit">
                <GoSearch />
              </Button>
            </InputGroup>
	);

}

다음과 같이 submit될 때 router.push를 이용해 input에 있는 keyword로 /search/${keyword}로 라우팅 되게끔 처리했다.

폴더 처리는 이와 같이slug를 활용해 구성했다.

"use client";
import { Box } from "@chakra-ui/react";
import { useParams } from "next/navigation";
import React from "react";

const PageTitle = () => {
  const params = useParams();

  const keyword = params.keyword;

  console.log(params);

  return (
    <>
      <Box fontSize="30px">{keyword}로 검색한 결과</Box>
    </>
  );
};

그리고 다음 그림과 같이 PageTitle.tsx 컴포넌트를 만들어 page.tsx에 넣어주었다.

그리고 그림과 같이 정상적으로 라우팅되며 url에서 [slug]요소를 잘 꺼내서 렌더링 할 수 있었다.(콘솔을 찍어서 확인도 가능했다.)

하지만 문제가 발생했다.😅😅

위의 그림과 같이 karina aspa라고 검색했는데 공백 사이에 %20이 들어가 있는 것을 확인할 수 있었다. 게다가 한글을 기입하게 되면 완전히 url이 엉망이 되어 버렸다.

엉망이 되어버린 URL(공백이 %20처리가 되어 화면에 렌더링 될 요소에 영향)

🟠 원인(url 인코딩)

인터넷을 통해 전송할 수 있는 문자는 오로지 ASCII 문자이기 때문이다. 따라서 ASCII 문자가 아닌 문자는 인터넷을 통해 전송할 수 있는 형태로 변환해줘야 한다.

ASCII 문자라 하더라도 예약된 의미를 가지고 있는 문자의 경우, 그 문자 자체의 의미를 전달하고 싶은 경우에는 이스케이프 처리가 필요하다. '/', '&', '='등으로 특정 쿼리의 의미를 암묵적으로 부여한다.

nextJs공식 문서에서도 이를 위해 useSearchParams를 이용해 이와 같은 문제에 대한 솔루션을 제공한다. 이를 활용해보자.

🟡 해결과정

우선 router.push부분을 바꿔주었다.

 const submitHandler = (e: React.FormEvent<HTMLFormElement> | any) => {
    e.preventDefault();
    router.push(`/search?keyword=${keyword}`);
  };

여기서 ?바로 뒤에 나온 keyword는 쿼리값이다.

그리고 파일 폴더에 slug를 지운다.

"use client";
import { Box } from "@chakra-ui/react";
import { useSearchParams } from "next/navigation";
import React from "react";

const PageTitle = () => {
  const search = useSearchParams();
  const keyword = search?.get("keyword");
  return (
    <>
      <Box fontSize="30px">{keyword}로 검색한 결과</Box>
    </>
  );
};