[React] - useRef

리액트로 작업하다 보면 돔 요소에 직접 접근해야 할 때가 있다. 예를 들어, 돔 요소에 포커스를 주거나 돔 요소의 크기나 스크롤 위치를 알고 싶은 경우다. 이 때 ref 속성값을 이용하면 자식 요소에 직접 접근할 수 있다.

>사용법

• 다음은 ref 속성값을 이용해서 input 창에 포커스를 주는 코드이다.
• useRef 훅이 반환하는 ref 객체를 이용해서 자식 요소에 접근할 수 있다.
• 접근하고자 하는 자식 요소의 ref 속성값에 ref 객체를 입력한다.
• 해당 돔 요소 혹은 컴포넌트가 생성되면 ref 객체로 접근할 수 있다.
• ref 객체의 currant 속성을 이용하면 자식 요소에 접근할 수 있다.

import React, { useRef, useEffect } from "react";

export default function App() {
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button>저장</button>
    </div>
  );
}