[React] useRef (리액트에서 DOM에 접근하기)

 

들어가기 전에

학원에서 프로젝트를 하면서 React를 사용하게 됐는데 React의 가상 DOM의 높이값을 가져와야 할 때가 있었다. 일반 JS라면 tag에 접근하고 싶을 때 getElementById 또는 querySelector 를 사용하면 된다. 하지만 코드는 위에서 아래로 실행하기 때문에 React에서 내가 알던 기존의 방법으로는 태그를 참조할 수가 없었다. 그렇게 공부하던중 useRef라는 React에서 사용하는 Hook을 알게 됐다. useRef는 사용하는 방법도 매우 간단하기 때문에 짧게 알아보도록 하자

 

useRef란?

useRef는 태그의 접근할 떄 사용할 수 있는 리액트 hook 중 하나다.

 

사용방법 및 예제

import { useRef } from 'react';


function App() {
  const divBox = useRef(null); // useRef(초기값)

  console.log(divBox.current) // divBox.current 에 태그가 있음

  return (
    <div className="App">
      <div className="divBox" 
        ref={divBox} 
        style={{background:"yellow", height: "50px", display: "flex", justifyContent:'center', alignItems:'center'}}
        >
        useRef로 div태그를 가져와볼거야
      </div>
    </div>
  );
}

export default App;

 

실행 및 결과값

 

ref로 태그를 가져올 수 있음을 콘솔창에서 확인할 수 있다.

 

참고사항

우리가 JS로 dom을 조작했을 때는 높이값을 가져왔을 때는 innerHeight를 사용하여 가져왔다. Ref에서 높이 값은 offsetHeight를 사용한다. 이처럼 JS에서 사용한 것들과 다를 수 있다.