[Magazine K Project] 검색 기능

front-end developer·2022년 11월 3일
0

검색 기능

네비게이션 바에서 Search 탭을 클릭하였을 때, 검색 모달창 노출시키기

  • 매거진B 사이트에서 Search 버튼을 누르면 검색 Input창이 나타난다.
  • 여기서, 검색어를 입력하게 되면 url에 검색한 값이 쿼리파라미터로 추가되며 새로운 페이지가 로드 된다.
  • 위와 같이 로직을 구현하기 위해, 먼저 Search라는 버튼을 클릭하게 되면 검색창이 나타나게하는 로직을 boolean과 조건부 렌더링을 통해 구현.
  • 먼저, useState를 통해 isClickedSearch라는 변수의 초기값을 false로 지정.
const [isClickedSearch, setIsClickedSearch] = useState(false);
  • isClickedSearch을 기준으로 검색창 UI를 조건부 렌더.
{isClickedSearch && (
        <form
          className="searchModalContainer"
          onSubmit={e => {
            const keyword = e.target.keyword.value;
            fetch(`keyword=${keyword}`);
            navigate(`/Search?${keyword}`);
          }}
        >
          <input
            className="searchBar"
            type="text"
            name="keyword"
            placeholder="Search Brand, City, Food..."
            autoFocus
          />
        </form>
      )}
  • isClickedSearch 값을 변경해주는 함수를 Search 탭을 클릭할 때 호출되도록 구현.
    const toggleSearch = () => {
        isClickedSearch ? setIsClickedSearch(false) : setIsClickedSearch(true);
      };
    
    <div className="menus" onClick={toggleSearch}>
    	Search
    </div>
    • toggleSearch라는 함수는 삼항 연산자를 통해 isClickedSearch 를 true or false로 값을 부여.
    • 이 함수를 Search를 클릭했을 때 발생시키도록 onClick 안에 구현.

검색 기능

  • 다음으로 검색창을 띄웠으니 값을 입력하면 새로운 창으로 이동하면서, 동시에 입력값을 API에 보내는 로직을 구현해야했다.

    <form 
    	className="searchModalContainer"
      onSubmit={e => {
        e.preventDefault();
        const searchValue = e.target.keyword.value;
        fetch(`http://10.58.4.28:8000/search?keyword=${searchValue}`)
          .then(res => res.json())
          .then(res => {
            if (res.message === 'SUCCESS') {
              navigate(`/Search?${searchValue}`);
            }
          });
      }}
    >
      <input
        className="searchBar"
        type="text"
        name="keyword"
        placeholder="Search Brand, City, Food..."
        autoFocus
      />
    </form>;
    • form태그 안에 input태그가 위치하고 있고, input태그에 값을 입력하면 form 태그의 onSubmit 함수가 작동.
    • onSubmit 함수안에서 e.target.keyword.value는 이벤트가 일어난 타겟 중 이름이 keyword인 태그를 찾아 값을 가져온다.
    • 이 값을 fetch URL에 쿼리파리미터로 넣어 백엔드 API에 보내주고 응답이 정상적으로 이뤄지면 /Search?keyword=검색값 이라는 페이지로 이동.
  • 검색어를 입력해서 새로운 페이지로 이동하면, 이동한 페이지에서 검색값을 기준으로 데이터를 받아오고 이 데이터 개수에 따라 페이지네이션이 적용되게끔 로직을 작성했다.

import React from 'react';

const PageList = () => {
  const pageNum = Math.ceil(total / limit);

  return (
    <ul className="pageLinkContainer">
      <li>
        <img className="pageLinkPrev" />
      </li>
      {Array(pageNum)
        .fill()
        .map((el, idx) => {
          return (
            <span key={idx}>
              {idx + 1}
            </span>
          );
        })}
      <li>
        <img className="pageLinkNext" />
      </li>
    </ul>
  );
};

export default PageList;
profile
학습한 지식을 개인적으로 정리하기 위해 만든 블로그입니다 :)

0개의 댓글