React의 <div>에서 onKeyDown 이벤트가 작동하지 않을 때

onKeyPress 이벤트가 deprecated된 이후로 , onKeyDown 이벤트를 사용하는데, 컴포넌트에 이벤트를 할당해주어도 작동하지 않는 경우가 있다.

그럴 때는 HTML의 tabIndex 속성을 이용해 값을 부여해주면, 정상적으로 작동한다.

tabindex - HTML: Hypertext Markup Language | MDN

참고로, React에서 컴포넌트가 렌더링 혹은 로드될 때 포커스를 주고 싶다면, ref, useEffect, useRef와 focus()를 이용해 포커스를 줄 수 있다.

const App = () => {
  const divRef = useRef<HTMLDivElement>();
  useEffect(() => {
    divRef.current?.focus(); // divRef.current!.focus();
  }, []);
  return (
    <div ref={divRef}>
      ...
    </div>
  );
}

Handling onKeyDown event on Div elements in React

원문: Medium