useRef

등장배경

• react: DOM 직접 수정 금지 document.querySelector 등 사용금지
• 하지만 DOM 객체 주소 필요한 상황 발생
  상황: 상태 변경 시 값 저장하고 리렌더링 안되게 해야 할 때
  => useRef 탄생

1. 저장공간으로 사용

• useRef : 리렌더링 안됨 (상태 저장)
• useState : 리렌더링 됨 (상태 초기화)

  useState 변화 => 렌더링 => 변수 값 초기화 됨
  useRef 변화 => 렌더링 안함 => 변수들의 값 유지
  useState 변화 => 렌더링 => ref의 값 유지

2. DOM 요소에 접근 가능

DOM 노드, 엘리먼트, React 컴포넌트 주소값 활용하는 경우

• <input> - focus()
• media playback - play(), pause(), remove()
• text selection
• 애니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

사용법

const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있다
return (
    <div>
      <input ref={주소값을_담는_그릇} type="text" />
        {/* React에서 사용가능한 ref속성에 주소값을_담는_그릇을 값으로 할당하면*/}
        {/* 주소값을_담는_그릇 변수 = input DOM 엘리먼트의 주소가 담김 */}
        {/* 다른 컴포넌트에서 input DOM 엘리먼트를 활용 가능. */}
    </div>);

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

• 제시상황 외 대부분의 경우, 기본 React 문법을 벗어나 useRef 남용하는 것은 부적절하다
• React의 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 한다

사용예시

useRef는 리렌더링 안하므로 화면 출력 안됨

• useState가 리렌더링하면 그때 useRef 화면 출력됨
  

변수관리 - 변수가 초기화 안되게 값을 유지

• useState는 값 초기화됨
• useRef는 값 저장됨
  

변화는 감지하지만 리렌더링 방지하고 싶을 때

• 리렌더링을 계속해도 변경된 값이 저장됨
  useRef로 값을 저장시 리렌더링 후, 값 초기화 되지 않음
  

DOM 요소(input, playback)에 접근

• DOM을 직접 조작시 리렌더링 되지 않음

• <input>에 focus()
  

• media playback play(), pause(), remove()