refdom

React ref를 언제 사용하는지 설명해 주세요

예상 시간
6분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

ref가 바뀌면 component가 리렌더링되나요?

부가 설명

function SearchInput() {
  const inputRef = useRef(null);
 
  function focusInput() {
    inputRef.current?.focus();
  }
 
  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>focus</button>
    </>
  );
}

DOM node에 접근해서 focus를 줄 수 있습니다.

function Timer() {
  const timerIdRef = useRef(null);
 
  function start() {
    timerIdRef.current = window.setInterval(() => {}, 1000);
  }
}

timer id처럼 화면에 표시할 필요가 없는 값은 ref에 보관할 수 있습니다.

ref는 React의 선언적인 흐름을 우회하는 도구이기도 합니다. 그래서 DOM 조작을 전부 ref로 처리하려고 하면 React와 실제 DOM 상태가 어긋날 수 있습니다.

State와 ref의 차이는 render와 연결됩니다. State는 값이 바뀌면 render가 필요할 때 쓰고, ref는 render와 무관하게 유지할 mutable 값에 씁니다.

한 줄 정리

ref는 DOM 접근이나 render와 무관한 mutable 값을 보관할 때 쓰고, ref 변경은 리렌더링을 만들지 않습니다.