useRef

useRef

---

• useRef는 React의 Hook 중 하나로, 함수형 컴포넌트에서 DOM 요소를 참조하기 위해 사용됩니다.
• useRef는 일반적으로 useRef() 함수를 사용하여 생성되며, useRef() 함수는 현재 값과 함께 객체를 반환합니다. 
• 이 객체는 ref.current라는 속성을 가지며, 이 속성을 통해 ref가 참조하는 값을 가져올 수 있습니다.
•  ref.current는 컴포넌트가 렌더링될 때마다 업데이트되지 않으며, 그 값은 현재의 값을 계속 유지합니다.
• useRef는 DOM 요소에 접근해야 하는 경우, 이전 값을 기억하고 다음 렌더링에서 비교해야 하는 경우, 
  함수 컴포넌트에서 클래스 컴포넌트의 인스턴스 변수를 사용해야 하는 경우에 사용합니다.

 

useRef 예시

---

import { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputRef.current.value);
    inputRef.current.value = '';
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

• 위 예제 코드에서 useRef를 사용하여 input 요소의 값을 관리합니다.
• handleSubmit 함수에서는 inputRef.current.value를 사용하여 input 요소의 값을 가져옵니다.
• 또한 inputRef.current.value를 사용하여 input 요소의 값을 초기화합니다.
• 이전 값과 비교하여 특정 작업을 수행하는 경우, useState나 useEffect와 같은 다른 Hook과 함께 사용할 수도 있습니다.