[리액트] useRef 사용하기 - 리액트에서 특정 DOM에 접근하기

useRef 를 자주 사용하지 않는데, 오랜만에 업무를 보다가 사용할 일이 생겼었다. 그래서 다시 한번 정리해본다!!

 

useRef 사용하기

리액트를 사용하면서 주로 useRef를 사용할 때는 특정 DOM 요소에게 접근해야할 때이다. 컴포넌트에 생긴 스크롤 동작을 제어해야하는 상황이 있었는데, 이때 useRef를 써서 하면 된다. 이 외에도 포커스를 설정해줘야한다던지, 크기를 특정해야한다던지 DOM요소에 대한 세세한 것들이 필요할 때 쓸 수 있다. 

 

저는 리액트를 함수형으로 쓰고 있기때문에 useRef hook에 대한 이야기를 합니다. 클래스형은 콜백함수도 써야하고. 살짝 방법이 다릅니다.

 

 

useRef 선언하기

선언 방법은 간단합니다. useRef 를 사용해서 변수를 선언해주고 그 안에 초기값을 넣어줍니다. 

가능 변수의 유형으로 초기값을 넣어주지 않으면 에러가 발생하고요, 타입스크립트와 함께 쓸 때는 타입도 선언해줘야합니다.

const boxRef=useRef(initalValue);

//with TypeScript
const boxRef=useRef<Number>(null);

 

선택한 DOM에 ref 를 선언해주고 그 안에 선언한 변수명을 넣어줍니다. 

<div ref={boxRef}>
  <h1>hello world</h1>
</div>

 

자 실질적으로 접근한 DOM은 어떻게 써야할까요?

const el = boxRef.current

뒤에 current를 붙여주시면 해당 DOM의 엘리먼트를 가져올 수 있답니다. 포커스가 필요하면 그 뒤에 focus()를 붙여주시면 됩니다. 참 쉽죠?

 

 

 

React - useRef 공식문서

Hooks API Reference – React

위에서 가볍게 설명한 내용들을 공식문서에서 길게~ 보실 수 있답니다