useRef 를 활용하여 DOM 요소에 접근

React에서는 useRef를 활용하여 변수를 저장할 수 있다.

state 와는 다르게 useRef의 값은 변경이 되어도 재 렌더링 되지 않는다.

이를 활용하여 임의의 DOM에 접근할 수 있는데,

일단 react에서 useRef 를 import 해온 후, useRef()를 선언한다.

import react, { useState, useRef } from "react";

function App() {

  const firstRef = useRef();
...

firstRef 라는 변수가 생성되고 이 firstRef 변수 안에 current라는 key에 값이 저장된다.

이에 직접적으로

firstRef.current = 값

이런식으로 값을 할당할 수 있고, 임의의 DOM 에 접근하기 위해서는,

해당 요소에 ref={} 를 지정해주면 된다.

 <div ref={firstRef}></div>

이렇게 된다면 firstRef 의 current에 div 요소가 할당되게 된다.

이를 활용하여 firstRef.current.scrollIntoView()

이런식으로 해당 element로 바로 스크롤 시키거나 그외에 많은 동작을 실행할 수 있다.

이런식으로 javascript에서 document.getElementById / document.querySelector

처럼 DOM 에 접근할 필요없이 useRef를 이용하여 DOM 에 접근할 수 있다.