useRef

이 글은 벨로퍼트님의 글을 참조하여 기반으로 작성되었음을 알립니다.

오늘은 리액트 훅 중 하나인 useRef 훅을 살펴보자.

useRef는 언제 사용할까?

자바스크립트에서 특정 DOM을 선택할 때 어떻게 했었는지 떠올려 보자.

아마 대부분이 document.querySelector(), document.getElementById(), document.getElementByClassName() 등을 사용해서 DOM을 선택하여 조작했을 것이다.

리액트를 사용할 때도 가끔 DOM을 직접 선택해야 하는 상황이 생길텐데, 그럴 때 리액트에서는 ref라는 것을 사용한다. 그리고 함수형 컴포넌트에서는 useRef 라는 리액트 훅을 사용한다.

어떻게 사용할까?

1. 일단 useRef를 불러온 후 선언과 동시에 변수에 담아준다. 이 변수엔 Ref객체가 담긴다.

import { useRef } from "react";
const MyApp = () => {
  const ref_객체가_담긴_변수 = useRef();
  return (
  	<div>
    	<input type="text" />
  	</div>
  );
}
export default MyApp;

2. Ref 객체가 담긴 변수를 내가 선택하고 싶은 DOM의 ref 속성의 값으로 설정해준다.

import { useRef } from "react";
const MyApp = () => {
  const ref_객체가_담긴_변수 = useRef();
  return (
  	<div>
    	<input ref={ref_객체가_담긴_변수} type="text" />
  	</div>
  );
}
export default MyApp;

3. 이제 ref_객체가_담긴_변수는 내가 선택한 DOM인 input을 가리키고, ref객체안의 current값을 조회하면 내가 선택한 input이 선택된 것을 알 수 있다.

import { useRef } from "react";
const MyApp = () => {
  const ref_객체가_담긴_변수 = useRef();
  console.log(ref_객체가_담긴_변수.current);
  return (
  	<div>
    	<input ref={ref_객체가_담긴_변수} type="text" id="내가선택한거임!" />
  	</div>
  );
}
export default MyApp;

// output: <input type="text" id="내가선택한거임!" />

MyApp 컴포넌트가 렌더링되는 화면에서 브라우저 콘솔창을 열어보면 내가 선택한 input 객체가 나온다.