[React] useRef

useRef

JavaScript를 사용 할 때에는, 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택했다면, React에서는 DOM요소에 접근하기 위한 useRef라는 React Hook이 있다.

useRef(initialValue)

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  const inputRef = useRef(null);
  // ...

---

매개변수

• initialValue :
  • ref 객체의 current 프로퍼티 초기 설정값.
  • 여기에는 어떤 유형의 값이든 지정할 수 있다.
  • 이 인자는 초기 렌더링 이후부터는 무시.

---

반환값

useRef는 단일 프로퍼티를 가진 객체를 반환.

• current :
  • 처음에는 전달한 initialValue로 설정.
  • 나중에 다른 값으로 바꿀 수 있다.
  • ref 객체를 JSX 노드의 ref 속성으로 React에 전달하면 React는 current 프로퍼티를 설정.

---

🔍 예시

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

• 버튼을 클릭할때마다 alert으로 클릭 횟수 출력.
  
  

useRef_react
useRef_vlpt