useRef

일단 내가 아는것.

• Ref는 reference
• DOM을 꼭 사용해야 하는 상황
  • 특정 input에 포커스 주기
  • 스크롤박스 조작하기
  • canvas 요소에 그림 그리기

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

위의 예로 화면의 button클릭시 input 창에게 focus 효과를 주는것이다.

우리가 알아야하는것은 useRef(null) 기본 값은 null 이다. 왜냐면 아직 function이 실행하지 않았기때문이다.