useRef 어떻게 사용할까?

useRef 는 리액트제공하는 Hooks 기능 중 하나이다.

 

useRef를 선언 후 태그에 ref={ 변수명 } 로 지정할 수 있다.

마치 태그의 고유 이름인 id를 주는 것과 비슷하다.

 

가장 기본적인 기능은 input의 focus를 맞추는데 사용할 수 있다.

 

기본적으로 페이지에 접속하거나 특정 버튼 및 동작을 하고 특정 input에서 깜빡거리는것을 볼 수 있다

useRef() 를 활용하여 가능하다.

 

import { useRef } from "react";

export default function USERefPage() {
  const writerInput = useRef(null);

  const onClickRefTest = () => {
    writerInput.current.focus();
    console.log(writerInput);
  };
  return (
    <div>
      <div>
        작성자 : <input ref={writerInput} />
      </div>
      <div>
        내용 : <input />
      </div>
      <div>
        비밀번호 : <input />
      </div>
      <button onClick={onClickRefTest}>ref 버튼</button>
    </div>
  );
}

 

ref 버튼을 클릭하면 지정해놓은 "작성자"의 input으로 focus 된다.

 

이 기능은 스타일을 꾸밀때 활용하면 좋을 것 같다.