1. useRef란?

useState나 useEffect만큼 자주 쓰지는 않지만, 특정 DOM을 선택해서 직접 다룰 수 있다는 장점이 있습니다. 특정 스타일을 줘야 하거나, 스크롤 위치를 가져오거나, 렌더링 후 input에 포커스를 줘야 할 때처럼 DOM을 직접 선택해야 하는 경우 **useRef**를 사용합니다.

2. useRef 예시

import { useRef } from "react";

export default function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <Wrapper>
        <Input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>Focus the input</button>
      </Wrapper>
    </>
  );
}

예제 페이지 예제를 직접 보면서 확인하면 이해하기 쉬워서 실습 페이지로 만들어 두었습니다.

useRef를 사용하면 current라는 속성을 확인할 수 있습니다.

current란?

useRef는 current의 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.

console.log(inputEl)

input을 다루려면 inputEl.current로 실제 DOM 요소에 접근해야 합니다.