SearchForm 컴포넌트

1. <lable>, <input> 태그

먼저 label이 굳이 없는데 써야 하는 이유가 있는지 궁금합니다. 또 암시적으로 <label> 태그로 감싸며 사용하는데 그렇다면 htmlFor을 사용하지 않아야 하고, 명시적으로 사용할 거면 <input> 태그를 감싸지 않는 것이 좋아 보입니다. 일반적으로 사용하는 명시적으로 구현했습니다.

input 태그 타입이 search인 경우 name을 주로 q를 사용하지만 id 까지 q를 사용할 필요는 없다고 생각해 searchBox로 수정했습니다.

(수정 전)
<label htmlFor='q' ...>
	<input .../>
</label>

(수정 후)
<label htmlFor="searchBox" className={styles.label} />
<input type="search" id="searchBox" />

2. <span hidden>의 의미?

이것이 필요한 이유를 모르겠습니다. 삭제하려다 과거 ejs 템플릿을 이용해 개발했을 때 화면에는 숨기고 서버로 데이터를 보내기 위해 input 타입 hidden을 사용해본 경험이 있어 그것을 의미하는지 싶어 설정했습니다.

(수정 전) <span hidden>검색어</span>
(수정 후) <input type="hidden" id="searchValue" name="searchValue" /> 

3. LinkToFilter 컴포넌트 삭제

searchForm 컴포넌트는 검색만을 위한 컴포넌트입니다. result 페이지일 때 조건부 렌더링으로 페이지를 이동할 필요가 없다고 판단해 삭제하고 result 페이지에 직접 구현했습니다.

// SearchForm 컴포넌트
(삭제) {location.pathname === '/result' && <LinkToFilter />}

// Result 페이지 
<Stack gaps={[0, 10, 20, 20]}>
      <SearchForm />
(추가)<LinkToFilter />
      <Books items={items} />
      <Pagination />
</Stack>

4. useForm 커스텀 Hook

먼저 과거에 온갖 Hook과 utils 함수를 이용해 만든 훅이 걷잡을 수 없을 정도로 복잡해져 구현을 포기한 경험이 있습니다. 반면에 useForm 커스텀 훅은 리액트에 내장되어 있는 Hook으로만 구성되어 있고 외부 함수를 사용하지 않아 단일 책임 원칙을 지키는 느낌을 받아 좋았습니다.

아쉬운 점은 useForm 이라는 변수명, 파라미터와 반환값으로 검색과 관련된 훅이라는 생각이 들지 않았습니다. 또 useForm의 첫 번째 반환값은 검색 정보, 필터링 정보를 의미하지만 단순 state로 묶어 어떤 state인지 식별하기가 어려웠습니다. 또 handleSelect 함수의 의미를 모르겠고 사용하는 곳이 없어 삭제했습니다.

(수정 전) const { state, handleChange, handleSubmit } = useForm()
(수정 후) const { searchInfo, handleChange, handleSubmit } = useSearchForm()