ref, useRef 로 input focus 제어하기 | useRef | React

➡️ 투두리스트 전체 코드 구경하기
➡️ 이 포스팅 관련 코드만 보기
투두리스트를 만들던 도중 수정버튼을 클릭했을 때 해당 투두의 input으로 바로 focus가 가지 않아서 한번 클릭해야 하는 점이 불편하게 다가왔다.
수정 버튼을 클릭하면 바로 해당 input에 focus가 가고, 사용자가 다른 동작 없이 바로 수정할 내용을 입력하게 하고싶었다.
useRef를 통해 element에 직접 접근하는 방법을 사용해보았다.
react, typescript를 사용했다.

수정버튼 클릭 후 또 input을 클릭해야 하는 모습

input에 ref부여

접근할 input에 prop으로 ref를 주었다.
이제 inputRef라는 변수를 통해 요소에 접근이 가능해진다.

//투두예시.tsx
const ListItem = () => {
  const inputRef = useRef<HTMLInputElement>(null);//ts
  //js: const inputRef = useRef(null);
  
  return (
    <input ref={inputRef}/>
	<button onClick><button/>
    )
}

버튼 클릭 함수에서 ref에 접근

//투두예시.tsx
const ListItem = () => {
  const inputRef = useRef<HTMLInputElement>(null);//ts
  //js: const inputRef = useRef(null);
  
  function clickModifyBtn() {
    if (inputRef.current !== null) {
      inputRef.current.disabled = false; //input 비활성화 해제
      inputRef.current.focus(); //input에 focus
    }
  }
  
  return (
    <input ref={inputRef}/> //todo input
	<button onClick={clickModifyBtn}>수정하기<button/> //수정 버튼
    )
}
//참고용 예시이므로 실제코드와 다릅니다.

이렇게 수정버튼을 클릭하면 inputRef.current의 disable도 false로 변경하고,
focus도 되도록 하는 함수를 작성해보았다.
간단하지만 ref에 익숙하지 않은 나는 적응하는 시간이 필요했던 것 같다. 이제 적응 완료!!

수정버튼을 클릭하면 바로 input에 focus되는 모습

Reference
MDN
daleseo님 블로그