useRef는 무엇을 위한 것입니까? 언제 사용해야 하나요?

문서를 반복해서 읽으려고 했지만 여전히 useRef를 이해하지 못한다면 이 게시물이 적합합니다!

useRef란 무엇입니까?

useRef는 나중에 사용하기 위해 무언가를 보관할 수 있는 상자와 같습니다. 숫자, 물건, 원하는 모든 것.

useRef

이 상자에 저장한 항목은 useState 와 유사하게 렌더링 간에 보존됩니다. 즉, 구성 요소가 업데이트될 때 상자가 파괴되지 않습니다.

그리고 상자 내용물을 변경해도 구성 요소에는 아무 일도 일어나지 않습니다. 상자 내용물은 변경되지만 구성 요소는 동일하게 유지됩니다.

관찰:

구성 요소 상태 변수( useState )와 달리 ref 값을 업데이트해도 새 렌더링이 트리거되지 않습니다.

클래스 구성 요소에서 오셨습니까? 좋습니다. 인스턴스 변수( this.value = someValue )에 무언가를 저장하는 것과 같습니다.

그것은 무엇을 위해 사용됩니까?

그래 좋아. useRef 구성 요소 "메모리"에 무언가를 저장하는 데 사용되지만 값이 업데이트될 때 새 렌더링을 트리거하지 않습니다.

그러나 그것은 무엇을 위해 사용됩니까?

두 가지 주요 사용 사례가 있습니다.

1) 나중에 할 수 있도록 DOM 요소를 저장합니다.

예를 들어 사용자가 이메일 입력에서 "ENTER"를 누를 때 비밀번호 입력에 초점을 맞출 수 있습니다.

"ENTER"를 누를 때 다음 요소에 초점을 맞춥니다.
useRef ( source code )로 할 수 있습니다.

export default function App() {
  const emailRef = useRef();
  const passwordRef = useRef();
  return (
    <div className="App">
      <p>
        <label htmlFor="email">Email:</label>
        <input
          id="email"
          ref={emailRef}
          onKeyPress={({ charCode }) => {
            if (charCode === 13) {
              passwordRef.current.focus();
            }
          }}
        />
      </p>
      <p>
        <label htmlFor="password">Password:</label>
        <input id="password" ref={passwordRef} />
      </p>
    </div>
  );
}

입력 구성 요소에 대한 참조를 저장하는 useRef 예제

2) 주시하고 싶은 값을 저장하려면

때로는 값을 주시하고 싶지만 값이 변경될 때 새 렌더링을 트리거할 필요는 없습니다.

예: storing the previous value of a state variable .

이것은 카운터와 이전 값을 표시하는 간단한 응용 프로그램입니다. 또한 카운터를 증가시키는 두 개의 버튼이 있습니다(1 및 10).

이전 값을 저장하기 위한 useRef의 예

Source code :

function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current;

  return (
    <div className="App">
      <h1>Previous value with useRef</h1>
      <p>
        <button onClick={() => setCount((value) => value + 1)}>
          Increase counter by 1
        </button>
        <button onClick={() => setCount((value) => value + 10)}>
          Increase counter by 10
        </button>
      </p>
      <p>
        Now: {count}, before: {prevCount}
      </p>
    </div>
  );
}

이전 값을 저장하는 useRef