이 부분을 작업하면서 form, input 태그를 활용한 검색 인풋창 엔터 이벤트 구현하기와 각 이벤트에 적절한 타입 지정 방법을 알게 되었다.

구현한 화면

상단 헤더 맨 오른쪽의 검색 아이콘을 누르면 '/search'인 다음 화면이 뜬다.

인풋창에 검색어를 입력하고 바로 왼쪽의 검색 아이콘을 누르거나, 또는 '엔터'를 치면 주소 링크 맨 뒤에 검색어가 추가되고 검색 결과 페이지로 이동한다.

코드

이벤트 타입 지정

• input의 onChange 이벤트에는 React.ChangeEvent<HTMLInputElement>를 붙인다.
• input의 엔터 이벤트에는 React.KeyboardEvent<HTMLInputElement>를 붙인다. (onKeyDown 사용: onKeyPress는 deprecated되었다)

구현 상세

• input 자체에 엔터 이벤트를 붙이기 위해 form 태그 안에 넣는다.
• handleKeyDown 함수: 누른 키가 'Enter'이면 인풋 왼쪽의 검색 아이콘을 누른 것과 동일한 동작을 수행하도록 한다. ('/search/키워드' 페이지로 이동)
• e.keyCode는 deprecated 이므로 e.key를 쓰자.

export default function Search() {
  const navigate = useNavigate();
  const [keyword, setKeyword] = useState('');

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    setKeyword(value);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSearchIconClick();
    }
  };

  const handleSearchIconClick = () => {
    navigate(`/search/${keyword}`);
  };
  
  return (
    <>
      <div className={styles.wrapper}>
        <div className={styles.container}>
          <form className={styles.searchBar}>
            <Link to={`/search/${keyword}`}>
              <button
                className={styles.searchIcon}
                onClick={handleSearchIconClick}
              >
                <SearchIcon />
              </button>
            </Link>
            <input
              className={styles.searchInput}
              placeholder='원하는 스터디를 검색해보세요.'
              onChange={handleInputChange}
              onKeyDown={handleKeyDown}
              autoFocus
            />
          </form>
          ...
        </div>
      </div>
    </>
  );
}