[리액트] 내비게이션 바 검색 구현 (feat. <form> 태그 , 필요한 순간은?)

내비게이션 바에서 특정 키워드로 검색을 시도하면, 검색 페이지로 이동한 뒤 해당 키워드에 맞는 데이터를 화면에 표시하는 기능을 구현했습니다.

이번 포스트에서는 사용자가 입력한 검색어를 기반으로 API 요청을 보내고, 응답 데이터를 화면에 출력하는 과정에서 마주쳤던 문제들과 이를 통해 얻은 인사이트를 정리하겠습니다.

 

최종 UI

검색 과정

이벤트 동작 정의하기

입력 값에 따른 병원 정보 출력

사용자가 input 태그에 값을 입력한 뒤 검색 버튼을 클릭하거나 Enter 키를 누르면, 해당 이벤트를 기준으로 페이지가 이동하고 입력한 키워드를 이용해 API 요청이 수행되어 특정 병원 데이터를 검색합니다.

 

이벤트 처리 구현하기 

데이터 입력하기 

 

📗 참고 자료

input 태그 사용 시 form 태그 사용 여부 - 인프런 | 커뮤니티 질문&답변

 

기존에 검색 기능을 구현할 때에는 검색은 곧 submit이라고 생각하여 input 태그를 form 태그 안에 넣어 구현했습니다.

 

그러던 중, input 태그에 입력된 값을 form 태그에서 어떻게 읽어오는지 궁금하여 관련 자료를 찾아보던 중 인프런 커뮤니티에서 유용한 내용을 확인할 수 있었습니다. 내용은 아래와 같았습니다. 

 

form 태그 사용 시 장점

input 태그에 id가 할당되어 있으면, State에 따로 값을 저장하지 않아도 submit 이벤트 발생 시 자동으로 값을 가져올 수 있습니다. (아래 코드 참고)

 

➡️ 즉, 회원가입처럼 많은 input이 포함되어 있고 굳이 값을 State에 저장할 필요가 없는 경우에 form 데이터를 활용하는 것이 적합합니다.

 

👉🏻 코드 보기

import "./styles.css";

export default function App() {
  const onSubmit = (e) => {
    const firstValue = e.target.first.value;
    const secondValue = e.target.second.value;

    console.log({ firstValue, secondValue });
    e.preventDefault();
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <input id="first" />
      </div>
      <div>
        <input id="second" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  );
}

 

 

선택한 방법

이번 검색 기능 구현에서는 오직 하나의 input만 포함되어 있었기 때문에 form 태그를 사용하지 않고 input 태그만 활용하여 구현하기로 결정했습니다.

 

 

검색어 입력 및 페이지 이동

사용자가 네비게이션 바에서 검색어를 입력하면 해당 검색어와 함께 검색 결과 페이지로 이동합니다.

function handleSearchSubmit(searchKeyword, navigate) {
        navigate(`/search?q=${searchKeyword}`) //페이지 이동
}

 

💡 Enter 인식 방법

onKeyDown은 키 누름 이벤트를 감지하는 데 사용되는 이벤트 리스너입니다.  

 

📗 참고자료

React onKeyDown Event - GeeksforGeeks

 

• 키 누름 이벤트가 발생했을 때 해당 key가 Enter라면 이벤트를 호출합니다.
• Enter 키뿐만 아니라 Space, Tab 등의 키에도 사용 가능합니다. 

onKeyDown={(e) => e.key === "Enter" ? "이벤트 호출": null}

URL 파라미터 활용해 API 요청

검색 결과 페이지에서는 useSearchParams를 사용해 URL의 파라미터 값을 가져오고 해당 값으로 API 요청을 수행합니다.

 

💡 useSearchParams

URL의 쿼리 파라미터를 읽고 설정하는 도구입니다. 

 

📗 참고 자료

[React.js] useSearchParams 훅 (React Router)

 

사용법은 아래와 같습니다. 예: /search?keyword=banana

import { useSearchParams  } from 'react-router-dom';

const [searchParams, setSearchParams] = useSearchParams();
const keyword = searchParams.get("keyword"); //URL의 파라미터 값을 가져올 수 있습니다.

 

 

👉🏻 코드 

ClinicSearchResultPage.jsx

import { useSearchParams  } from 'react-router-dom';
import { fetchSearchClinicByQuery } from '../api';

function ClinicSearchResultPage() {

    const [searchParams, setSearchParams] = useSearchParams();

    useEffect(() => {
            const keyword = searchParams.get("q");
            fetchSearchClinicByQuery(keyword, currentPage)
            .then((res) => {
                console.log(res.data);
                setTotalPages(res.data.page.totalPages)
                setSearchResult(res.data.content)
            })
        }, [searchParams, currentPage])

        ... 생략

}

 

api.js (api 요청을 담당하는 파일)

export function fetchSearchClinicByQuery(searchKeyword, navigate) {
    const token = localStorage.getItem("accessToken")?.trim();
    
    return api.get(
        "/search",
        {
            params : {
                "p": `${searchKeyword}`
            },
            headers: {
                "Authorization": `Bearer ${token}`
            },
        },

    )
}

 

 

응답 데이터 렌더링

API 응답으로 받은 데이터를 화면에 표시하여 사용자가 검색 결과를 볼 수 있도록 합니다. 

 

검색어 변경 시 페이지는 유지, 파라미터만 변경

사용자가 네비게이션 바에서 새로운 키워드를 입력하면 페이지는 그대로 두고 URL 파라미터만 변경됩니다. 

 

파라미터 변경 감지 후 API 재호출

useEffect 훅을 사용하여 파라미터 값이 변경될 때만 API를 다시 호출합니다.

이를 통해 페이지 전체가 새로 렌더링 되는 것이 아니라 데이터만 업데이트됩니다.