API 불러오기는 성공! 그런데...?

오늘은 검색 페이지를 구현하는 날. 커스텀 훅을 사용해 유저 검색 api를 불러오는 것까지는 성공했다. 검색창 밑으로 가입된 유저들의 정보가 뜨는 것을 보고 환호했지만, 막 첫 단계를 성공했을 뿐 앞으로 채워가야할 부분이 많다는 걸 알 수 있었다.

첫 번째, 검색은 텍스트를 입력했을 때만!

가장 처음 발견한 문제점은 텍스트를 입력하지 않아도 모든 유저 정보가 검색된다는 것. 검색 페이지에 들어올 때마다 엄청난 양의 정보가 불려와져서 불필요한 메모리가 소모되었다. 문제를 해결하기 위해 다음 코드를 추가했다.

export default function Search() {
  const [searchKeyword, setSearchKeyword] = useState("");

  const queryClient = useQueryClient();

  const { data } = useApiQuery(
    searchKeyword ? `/user/searchuser/?keyword=${searchKeyword}` : null,
    "get",
  );
  // ...
}

검색어를 입력하지 않아도 정보가 불려오는 문제였으므로, API 호출 전에 searchKeyword가 비어 있는지 확인하는 조건을 추가했다. 그런 다음 searchKeyword가 비어있을 경우 null을 전달해 API 호출을 건너뛰게 했다.

두 번째, 검색 값을 받아오기

검색어를 입력하는 검색창 부분은 Header.jsx 컴포넌트에 작성되어 해당 값이 검색 결과를 나타내는 Search.jsx 페이지에 전달될 수 있도록 설정해야 했다. 두 파일은 부모-자식 관계가 아니기 때문에 prop로 값을 전달할 수가 없어서 처음에는 어떤 방식을 사용해야할지 고민을 했었다.

Router의 useLocation 훅은 location 객체를 반환해 pathname, search, state 등에 접근할 수 있다. 그래서 보통 pathname에 따라 상태 값을 변경하고 싶을 때 사용한다. 이러한 useLocation 훅을 사용해 쿼리 매개변수에 액세스하고 이를 Search 컴포넌트에 전달하는 방법을 사용했다.

Header.jsx

import React, { useState } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
// ...

export default function Header() {
  // ...

  const location = useLocation();
  const navigate = useNavigate();

  const [searchKeyword, setSearchKeyword] = useState("");

   // URL 쿼리 매개변수에서 검색 키워드가 변경되면 업데이트
  const handleSearchKeywordChange = (e) => {
    const newSearchKeyword = e.target.value;
    setSearchKeyword(newSearchKeyword);
    navigate({ search: `?keyword=${newSearchKeyword}` });
  };

  // ...

  return (
    <>
      {/* ... */}
      {pathname === "/search" && (
        <SearchInput
          type="text"
          placeholder="계정 검색"
          value={searchKeyword}
          onChange={handleSearchKeywordChange}
        />
      )}
      {/* ... */}
    </>
  );
}

Search.jsx

export default function Search() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const searchKeyword = searchParams.get("keyword") || "";

Header 컴포넌트의 searchKeyword 값이 변경될 때마다 URL 쿼리 매개변수가 업데이트 되면, Search 컴포넌트에서 useLocation 훅과 URLSearchParams를 사용해 쿼리 매개변수에서 searchKeyword 값을 검색할 수 있게 해주었다.