[react] useRef Hook + 예제

useRef의 탄생 배경

---

JS를 사용하면서 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector와 같은 DOM 선택자 함수를 사용한다. 

 

react를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 발생할 수 있다. 

예를 들어, 특정 엘리먼트의 크기를 가져와야 한다던가, 스크롤바 위치를 가져오거나 설정해야 한다던가 등의 상황 등이 있다. 

 

추가적으로 HTML 5 Video 관련 라이브러리(Video.js), 그래프 관련 라이브러리(chart.js) 등 외부 라이브러리를 사용할 때에도 특정 DOM에다 적용하기 때문에 DOM을 선택해야 하는 상황이 발생할 수 있다. 

 

이때, 리엑트에서 ref라는 것을 사용한다. 

 

 

useRef Hook

---

함수형 컴포넌트에서 ref를 사용할 때 useRef Hook 함수를 사용합니다.

ref는 렌더링이 안된다는 장점이 있습니다. 다시말해, 값은 변경이 되지만 렌더링이 되지는 않습니다.

 

 

예제

---

input에 값을 입력하고 초기화 버튼을 클릭했을 때 포커스가 초기화 버튼에 그대로 남아있게 됩니다.

하지만 useRef Hook을 사용해서 초기화 버튼을 클릭했을 때 input에 포커스가 잡히도록 수정할 수 있습니다.

해당 링크에서 직접 실험해볼 수 있습니다. 

import React, { useState, useRef } from 'react';
import './style.css';

export default function App() {
  const ref = useRef();
  const [input, setInput] = useState('');

  const onChangeInput = (e) => {
    setInput(e.target.value);
  };
  const clearInput = () => {
    setInput('');
    // 아래 코드를 제거한 후 결과를 확인해보면 됩니다.
    ref.current.focus();
  };

  return (
    <div>
      <input value={input} onChange={onChangeInput} ref={ref} />
      <button onClick={clearInput}>초기화</button>
    </div>
  );
}

 

 

참고자료

---

• https://react.vlpt.us/basic/10-useRef.html

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖