[React] useRef란? useRef 사용법, 예시

useRef가 뭐임?

useRef는 React에서 DOM 요소나 다른 React 요소에 접근할 때 사용하는 Hook 이다.

 useRef를 사용하면 DOM 요소에 직접 접근하거나 React 요소에 참조를 할당할 수 있다. 

 

useRef 특징

1. useRef 훅에서 주로 cuurent 속성을 사용한다.

 2. current 속성은 실제 DOM 요소나 React 컴포넌트 인스턴스를 가리킨다.

3. useRef를 호출할 때 인자로 넘긴 값은 참조의 current 속성의 초기값으로 설정됩니다.

 

어떻게 씀?

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const [value, setValue] = useState(null); // 인풋 값을 저장할 state


  // useRef로 참조 생성(호출)
  const myRef = useRef(initailize); // 호출할 때 인자로 넘긴 값(initailize)이 myRef.current 의 초기값

  return (
    <div>
      {/* ref를 DOM 요소에 할당 */}
      <input ref={myRef} /> // myRef는 해당 input DOM을 참조한다(가리킨다).
      <button onClick={()=>setValue(myRef.current.value)}>제출</button> // myRef가 참조하는 DOM의 value를 전달한다. 즉 input 값을 전달한다.
    </div>
  );
}

 

왜 useState 안 쓰고 useRef 씀?

두 코드가 있다

import React, { useState} from 'react';

function MyComponent() {
  const [value, setValue] = useState(null); 

  return (
    <div>
      <input onChange={(e)=>setValue(e.target.value)} /> 
    </div>
  );
}

위 코드는 useState로 인풋값을 전달 받는다.

위 코드는 input 값이 변경될 때마다 value 상태를 업데이트 하고 리렌더링을 수행한다.

따라서 input 값이 모두 입력되고 난 후에 value 값을 업데이트 하지 못한다. 

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const [value, setValue] = useState(null); // 인풋 값을 저장할 state


  // useRef로 참조 생성(호출)
  const myRef = useRef(initailize); // 호출할 때 인자로 넘긴 값(initailize)이 myRef.current 의 초기값

  return (
    <div>
      {/* ref를 DOM 요소에 할당 */}
      <input ref={myRef} /> // myRef는 해당 input DOM을 참조한다(가리킨다).
      <button onClick={()=>setValue(myRef.current.value)}>제출</button> // myRef가 참조하는 DOM의 value를 전달한다. 즉 input 값을 전달한다.
    </div>
  );
}

위 코드는 useRef를 사용하여 input 값을 전달받는다.

myRef가 input DOM을 참조하여 입력 값을 추적하지만 입력될 때마다 value를 업데이트 하지는 않는다

input에 모든 값을 입력한 후 버튼을 클릭하면 함수가 실행되어 value값을 업데이트 한다.

또한 useState를 사용하지 않아 input 값이 변경되더라도 리렌더링이 되지 않는다.

 

따라서 input 값에 모든 값이 입력된 후 값을 전달할 것이라면 useRef를 사용하는 방안도 검토해 볼 수 있다.

장단점이 있으니 알아서 판단 기