[React] useSearchParams : 검색 기능, setSearchParams, ?search=''

 

 

💡 검색 키워드로 데이터 가져오기

 

쿼리로 keyword=검색어 요런식으로 주소를 바꿔 검색을 했을 때

http://localhost:3000/courses?keyword=react

 

😲 useSearchParams 로 검색어만 빼올 수 있다!

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

function CourseListPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  console.log(searchParams.get('keyword')); // 주소에서 keyword 만 빼옴
  const [keyword, setKeyword] = useState(''); // input state
  const courses = getCourses(); // 데이터 가져오는 아이
  
//...
      <form className={searchBarStyles.form}>
        <input
          name="keyword"
          value={keyword}
          onChange={handleKeywordChange}
          placeholder="검색으로 코스 찾기"
        ></input>
        <button type="submit">
          <img src={searchIcon} alt="검색" />
        </button>
       </form>

 

 

가져온 키워드로 데이터를 가져오자!

  const initKeyword = searchParams.get('keyword'); // 키워드 상수 설정
  const [keyword, setKeyword] = useState(initKeyword || ''); // 키워드가 없을 경우 ''
  const courses = getCourses(initKeyword); // 키워드 넘겨줌

 

 

😲 이제 form 의 submit 으로 검색했을 때 검색어가 없는 경우를 방지해주자.

검색어가 없을 때 submit 을 하면

http://localhost:3000/courses?keyword= 주소가 이런식으로 바뀌는 중

  const handleSubmit = (e) => {
    e.preventDefault(); // 새로고침 막아주고
    setSearchParams(keyword ? { keyword } : {});
    // 서치 파람스를 키워드로 세팅한다. 키워드가 없는 경우는 비워두기! null 이 안되도록
  };
  
  //...
      <form className={searchBarStyles.form} onSubmit={handleSubmit}> // 함수 연결

 

이렇게 바꾸면 검색 버튼을 누르고 쿼리 스트링이 ?keyword=검색어 로 잘 바뀌면서,

검색어가 없는 경우는 http://localhost:3000/courses 로 주소가 바뀌고 코스 리스트가 뜬다.

 

✳️ searchParams 는 가져오는 애, setSearchParams 는 주소창 바꿔주는 애

 

 

✚ 검색어가 있지만, 코스가 없을 경우 안내문 표시

      {initKeyword && courses.length === 0 ? ( // 원래는 코스 길이가 없을 때만 설정했지만 키워드를 더해줬다.
        <Warn
          className={styles.emptyList}
          title="조건에 맞는 코스가 없어요."
          description="올바른 검색어가 맞는지 다시 한 번 확인해 주세요."
        />
      )