useRef

useRef는 리액트 컴포넌트의 주소값을 참조하는 기능을 가지고 있습니다. useRef는 주로 'DOM을 꼭 직접적으로 건드려야 할 때' 사용합니다. 그러나 대부분의 경우 기본 리액트 문법을 벗어나 useRef를 사용하는 것은 부적절하고 리액트의 특징인 선언적 프로그래밍 원칙과 멀어지기 때문에 조심해서 사용해야 합니다.

대부분의 상황은 state로 해결 가능하지만 state로 해결 불가능한 상황이 있습니다.

• 특정 input에 포커스 주기
• 스크롤 박스 조작하기
• Canvas 요소에 그림 그리기 등

이러한 경우에 경우 어쩔 수 없이 DOM에 직접적으로 접근해야 하는데, 이를위해 ref를 사용합니다.

function focusButton() {
  const el = useRef(null);
  const Onclick = () => {
    el.current.focus();
  };
  return (
    <>
      <input ref={el} type="text" />
      <button onClick={OnClick}>Focus the input</button>
    </>
  );
}