useRef

❓ React에서 useRef을 사용하는 목적 2가지

1. 리액트에서 DOM 요소에 직접 접근해야 할 필요가 있을 때

-> 요소에 포커스를 주거나, 원시 DOM API를 사용해야 할 때 useRef를 사용.

function TextInputWithFocusButton() {
  // input 엘리먼트에 접근하기 위한 ref를 생성합니다.
  const inputEl = useRef(null);

  // 버튼 클릭 시 input 엘리먼트에 포커스를 줍니다.
  const onButtonClick = () => {
    // `current` 프로퍼티가 실제 DOM 요소를 가리킵니다.
    inputEl.current.focus();
  };

  return (
    <>
      {/* ref 속성을 통해 input 엘리먼트와 ref를 연결합니다. */}
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

2. 컴포넌트가 렌더링될 때마다 초기화되지 않는 변수를 저장할 필요가 있을 때 사용.

-> useRef에 저장된 값은 바뀌어도 컴포넌트가 재렌더링되지 않음!

function Timer() {
  // count가 변경되어도 컴포넌트가 재렌더링되지 않습니다.
  const count = useRef(0);

  useEffect(() => {
    setInterval(() => {
      count.current += 1;
      console.log(`Timer has been triggered ${count.current} times.`);
    }, 1000);
  }, []); // 빈 의존성 배열을 사용하여 마운트 시에만 실행됩니다.

  return <div>Check the console to see the timer count.</div>;
}

❓useState와의 차이점

1. (렌더링할 때마다 재설정되는 일반 변수와 달리) 리렌더링 사이에 정보를 저장할 수 있음

2. (리렌더링을 촉발하는 state 변수와 달리) 변경해도 리렌더링을 촉발하지 않음

3. (정보가 공유되는 외부 변수와 달리) 각각의 컴포넌트에 로컬로 저장됨

❗ 그렇다면

- 컴포넌트에 일부 값을 저장해야 하지만 렌더링 로직에는 영향을 미치지 않는 경우 ref를 사용함

- 렌더링 중에는 ref.current를 읽거나 쓰면 안됨!