지금까지의 인터렉티브 UI는 링크로 URL을 변경하는 것과 action에 form 데이터를 request하는 것 중 하나였다.

search field는 이 둘의 혼합버전이다.

form이지만 데이터는 변경하지 않고 URL만을 변경한다.

아래는 React Router의 <Form> 이 아닌 기본 <form> 이다.

브라우저의 기본 동작을 알아보자.

Type a name into the search field and hit the enter key

브라우저에 URLSearchParams로 쿼리가 포함되어 진다.

http://127.0.0.1:5173/?q=ryan

form을 보자.

// 📄src/routes/root.jsx

<form id="search-form" role="search">
  <input
    id="q"
    aria-label="Search contacts"
    placeholder="Search"
    type="search"
    name="q"
  />
  <div id="search-spinner" aria-hidden hidden={true} />
  <div className="sr-only" aria-live="polite"></div>
</form>

앞에서 살펴본 바와 같이 브라우저는 <input> 엘리먼트의 name 어트리뷰트에 의해서 serialize 할 수 있다.

name 어트리뷰트의 값이 q 라서, URL이 ?q= 가 된 것이다.

만약 q 가 아닌 search 라면 ?search= 가 될 것이다.

출처 : 리액트 라우터 공식 홈페이지➡️