# 211223 TIL ([React, tsx] useRef로 input에 focus하기)

장기현장실습

SNU 성문분석 이슈

원격 서버에 접속하기 클릭 시 input에 바로 focus 되도록, 접속 버튼을 클릭 했을 때도 input으로 focus되게 수정 

• input이 기본 html 태그가 아니라 부트스트랩 Form.Control 태그를 사용하고 있어서 focus() 함수를 바로 사용하진 못함 
  • UseRef()를 사용해서 해당 DOM에 접근함 
  • 일반 HTML 요소와 같은 타입으로 만들어주기 위해 타입도 함께 선언함

    const nameInput = useRef<HTMLInputElement>(null); 
     
    <Form.Control 
      id="server-url" 
      type="url"
      placeholder="ip 주소를 입력해주세요." 
      value={ urlInput } 
      onChange={ e => setUrlInput(e.target.value)} 
      onKeyPress={submitUrl} 
      ref={nameInput} 
    />

• 모달이 열렸고(visible = true) focus할 input이 있을 때 focus 하도록 코드 추가

  useEffect(() => { 
    if( visible && nameInput ){ 
      nameInput.current?.focus(); 
    } 
  }, [ visible, nameInput ])

  

• 접속 버튼 클릭 시, 실행되는 함수에 focus 내용 추가 (버튼이 아닌 input에 포커스하도록)

  const onSubmitUrl = () => { 
    setAlertVisible(false); 
    if(nameInput) { 
      nameInput.current?.focus();
    }
    ...
  }