React - useRef

useRef

- 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook 임.

• useRef 는 React Hook 의 한 종류!
  Ref 는 reference(참조) 의 줄임말로,
  useRef 를 이용하면 특정한 DOM 요소에 접근이 가능하면, 불필요한 재렌더링을 하지 않는다는 장점이 있음.
  장점 ) 자주 변경되는 값을 state에 담으면, 변경될 때 마다 재렌더링이 일어나서 성능에 안좋은 영향을 미치게 된다. 하지만 useRef를 이용하면 값이 변경될 때 마다 재 렌더링이 일어나지 않는다
  => 성능향상!

! 렌더링을 해준다는 것 
-> 함수를 처음부터 다시 실행한다는 것을 의미. 

- 생성 문법

const ref = useRef(initialValue)

위의 생성 문법을 통해 결과값으로 {current : 초기값} 을 지닌 객체가 반환된다.
useRef 에서 기억할 것은 이러한 current 라는 키값을 지닌 프로퍼티(속성)가 생성되고, 값에
어떤 변경을 줄 때도 이 current 을 이용한다는 점.

매개변수 - initialValue

• ref 객체의 current 프로퍼티 초기 설정값임. 여기에는 어떤 유형의 값이든 지정 가능함.
  초기 렌더링 이후부터는 무시된다는 것이 특징

반환값

useRef : 단일 프로퍼티를 가진 객체를 반환
current : 처음에는 전달한 initialValue 로 설정됨. 

주의사항

1. ref.current 프로퍼티는 state 와 달리 변이할 수 있다. 그러나 렌더링에 사용되는 객체를 포함하는 경우 해당 객체를 변이해서는 안된다.
2. ref.current 프로퍼티를 변경해도 React 는 컴포넌트를 다시 렌더링 하지 않는다. ref 는 일반 JS 객체이기 때문에 React 사용자가 언제 변경했는지 알지 못한다.
3. 초기화를 제외하고는 렌더링 중에 ref.current 를 쓰거나 읽으면 안된다.

사용법

1. ref로 값 참조하기

• 컴포넌트의 최상위 레벨에서 useRef 를 호출하여 하나 이상의 ref 를 선언한다.

import {useRef} from 'react';
function Stopwatch () {
	const intervalRef = useRef(0);
}
// .. 

useRef 는 처음에 제공한 초기값으로 설정된 단일 current 프로퍼티가 있는 ref 객체를 반환한다.

• 아래 컴포넌트는 ref 를 사용하여 버튼이 클릭된 횟수를 추적한다. 클릭 횟수는 이벤트 핸들러에서만 읽고 쓰기 때문에 ref를 사용해도 노상관 !

function App() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert("You clicked " + ref.current + "times");
  }
  return <button onClick={handleClick}>Click me!</button>;
}
export default App;

- state 와 ref 의 조합 사용하기.

startTime 과 now 는 모두 렌더링에 사용되기 때문에 state 변수임.
그러나 버튼을 누를 때 interval 을 멈출 수 있게 하기 위해선 interval ID 도 보유해야 함
interval ID 는 렌더링에 사용되지 않으므로 ref 에 보관하고 수동으로 업데이트 하는 것이 적절함.

function App() {
  const [startTime, setStartTime] = useState(null);
  const [now, setNow] = useState(null);
  const intervalRef = useRef(null);

  function handleStart() {
    setStartTime(Date.now());
    setNow(Date.now());

    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  }
  function handleStop() {
    clearInterval(intervalRef.current);
  }
  let secondsPassed = 0;
  if (startTime != null && now != null) {
    secondsPassed = (now - startTime) / 1000;
  }
  return (
    <>
      <h1> Time passed : {secondsPassed.toFixed(3)}</h1>
      <button onClick={handleStart}> start </button>
      <button onClick={handleStop}>stop</button>
    </>
  );
}
export default App;

- useRef 로 DOM 조작하는 예시

• 1. 텍스트 input에 초점 맞추기

function App() {
  const inputRef = useRef(null);
  function handleClick() {
    inputRef.current.focus();
  }
  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}
export default App;