[React]검색 Input 엔터 이벤트 적용 onKeyDown (onKeyPress ❌)

1. 문제 상황

React에서 검색 입력(input) 컴포넌트에서 발생하는 키보드 이벤트(엔터를 눌렀을때)를 추가하려고 했는데

onKeyPress를 쓰려니 vscode에서 위와 같이 밑줄이 그어지고, deprecated라는 메세지를 나타냈습니다.

관련 문서를 찾아보니 onKeyPress는 더 이상 권장되지 않으며 사용을 피하고 기존 코드를 업데이트 하라고합니다.

기존 코드

<input
  type="text"
  placeholder="공연・전시 검색"
  ref={inputRef}
  onKeyPress={handleKeyPress} // 변경 전: onKeyPress 이벤트 사용
/>

2. 해결 방법

onKeyPress 이벤트를 onKeyDown 이벤트로 변경합니다.

      <input
        type="text"
        placeholder="공연・전시 검색"
        ref={inputRef}
        onKeyDown={handleKeyDown} // onKeyPress 대신 onKeyDown 사용
      />
      <button onClick={toggleSearch}>X</button>
    </SearchInputWrap>
  );
}

그리고 handleKeyDown 함수를 다음과 같이 정의합니다:

const handleKeyDown = (event) => {
  if (event.key === 'Enter') {
    // 엔터 키가 눌렸을 때 실행할 동작
  }
};

---

키보드 이벤트 처리를 통해 검색 입력 컴포넌트를 업데이트했습니다.