React - 팝업할 때 input에 autoFocus 주기

'Todo 추가'라는 버튼을 누르면 다음처럼 인풋창 두 개가 뜨는데 첫 번째 '할 일 제목' 인풋창에 인풋창들이 등장하자마자 자동 focus를 주고 싶었다.

다음과 같은 코드를 추가하여 성공

  ...
  
  useEffect(() => {
    if (isShowAddInput) {
      titleRef.current!.focus();
    }
  }, [isShowAddInput]);
  
  ...
  
  <AddInput
	ref={titleRef}
	placeholder='할 일 제목'
    ...
   />

참고 링크

🥰 react popover창에서 input에 autoFocus 적용하기

같은 글에 'popover에 autoSelect 적용하기'도 있는데 나중에 검색 기능을 구현할 때 유용할 듯 하다. (input 창을 클릭하면 자동으로 전체 입력값이 선택되어 쉽게 삭제)