[코드잇] 리액트 라우터 - 4. Query에 따라 데이터 보여주기 useSearchParams

URL(Uniform Resource Locator)
웹에 존재하는 특정 데이터를 나타내는 문자열

https://www.shoping.com/men/shirts?color=blue&size=m

Host : 전 세계 서버 중 하나의 서버를 특정

• www.shoping.com 부분

Path(경로) : 서버에 있는 데이터 중 원하는 데이터를 특정

• man/shirts 부분

Parameter(파라미터) : 경로에서 동적으로 변하는 값

• 만약 man/shirts 부분이 man/pants, man/shoes 등으로 값이 동적으로 바뀐다면 shirts 는 파라미터

Query(쿼리) : 데이터에 관한 세부적인 요구사항

• ?color=blue&size=m 부분

useSearchParams

Query 파라미터 값을 가져올 때 사용한다.

https://www.shoping.com/men/shirts?color=blue&size=m 에서

• color 에 대한 쿼리 값 :
  searchParams.get('color'); 으로 blue 가 출력된다.
• size 에 대한 쿼리 값:
  searchParams.get('size'); 으로 m 이 출력된다.

searchParams 사용법

const [searchParams, setSearchParams] = useSearchParams();
const 쿼리Value = searchParams.get("쿼리 key");
setSearchParams({ key: value });

• searchParams 는 { 쿼리 key: 쿼리 value} 를 프로퍼티로 가진 객체를 반환한다.
• searchParams.get() 으로 쿼리 key에 해당하는 value 값을 가져올 수 있다.
• setSearchParams는 URL의 쿼리(Query) 스트링은 변경할 수 있다.
  • setSearchParams()에는 객체만 전달해야 한다.

검색어를 입력하면, 검색어가 들어있는 데이터만 보여주는 코드

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

function CourseListPage() {
  const [searchParams, setSearchParams] = useSearchParams();

// keyword 라는 쿼리의 값을 initKeword에 할당한다.
  const initKeyword = searchParams.get("keyword");
  const [keyword, setKeyword] = useState(initKeyword || ""); // keyword는 반드시 문자열이어야 하므로, 없는 경우 빈 문장열 전달
  const courses = getCourses(initKeyword);

  // input 값 바뀔 때마다 keyword의 상태값 변경
  const handleKeywordChange = (e) => setKeyword(e.target.value);
  
  // keyword 상태 값이 있으면 "keyword" 쿼리의 값을 keyword 상태 값으로 정하는 함수 
  const handleSubmit = (e) => {
    e.preventDefault(); // 기본 동작인 페이지 리로드나 이동 방지

// setSearchParams에는 반드시 객체가 전달되어야 하므로, keyword 의 값이 없으면 빈 객체가 전달되도록 함
    setSearchParams(keyword ? { keyword } : {}); 
  }; // 객체 {keyword : keyword} 와 같다.

  return (
    <>
   {/* form에 onSubmit 속성 설정 */}
      <form className={searchBarStyles.form} onSubmit={handleSubmit}>
        <input
          name="keyword"
          value={keyword}
          onChange={handleKeywordChange}
          placeholder="검색으로 코스 찾기"
        ></input>
        <button type="submit"> {/* form의 onSubmit 함수가 실행된다.*/}
          <img src={searchIcon} alt="검색" />
        </button>
      </form>

      <p className={styles.count}>총 {courses.length}개 코스</p>

      {/* 검색어가 있고, 검색 결과가 없을 때만 ture */}
      {initKeyword && courses.length === 0 ? (
        <Warn
          className={styles.emptyList}
          title="조건에 맞는 코스가 없어요."
          description="올바른 검색어가 맞는지 다시 한 번 확인해 주세요."
        />
      ) : (
        <div className={styles.courseList}>
          {courses.map((course) => (
            <CourseItem key={course.id} course={course} />
          ))}
        </div>
      )}
    </>
  );
}

검색창 input에 입력하는 값에 따라 query 의 값이 바뀌고 query 조건에 해당하는 자료들만 보여진다.

<form> 태그 관련 특이사항

event.preventDefault()

<a>태그나 submit 속성은 고유의 동작으로 페이지를 이동시키거나, <form> 안의 <input>등을 전송하는 동작이 있다.
e.preventDefault()는 그 동작을 중지시키는 역할을 한다.
또한 <input> 또는 <button> 클릭 이벤트가 발생 했을때 페이지가 리로드되는 현상을 막아준다.

onSubmit 과 Enter

<form> 태그 내 <input type="text">가 1개인 경우 onSubmit 속성에, 따로 onKeyPress 나 onKeyDown 이벤트를 추가해주지 않아도, Enter키를 누르면 onSubmit 속성에 설정한 함수가 실행된다.

• <input type="text" /> 가 2개 이상이면 (따로 지정하지 않은 경우) Enter 로 실행되지 않는다.