[react] div태그 랜더링 시 포커스받게 하기

첫 랜더링 됐을 때 엔터키를 누르면 다음 창으로 넘어가게 하고싶었다.
div태그를 'next'버튼과 같은 기능을 하도록 해야했고, 엔터키를 눌렀을 때 이벤트가 호출되도록 해야했다.

      <div
        tabIndex='0'
        className='...'
        onKeyDown={handleKeyDown}
      >

처음 해결방법은 tabIndex를 넣어 포커스를 받도록 하는 것이었다.
하지만 마우스로 클릭하기 전에는 포커스를 받지않았다...

원하는 대로 되지않아 useEffect를 이용해 랜더링 시 포커스를 받도록했다.

  useEffect(() => {
    document.getElementById('welcome-modal').focus();
  }, []);
  
  ...
  
      <div
        id='welcome-modal'
        tabIndex='0'
        className='...'
        onKeyDown={handleKeyDown}
      >

포커스를 받기원하는 태그의 아이디를 이용해 랜더링 시 포커스를 받도록했다.