useRef로 초기 렌더링 때 DOM 요소에 접근하는 법

스크롤 작업때문에 useRef로 DOM 엘리먼트들에 접근 후
offsetTop 값을 따로 구하고 싶었는데,
초기 렌더링 시에는 useRef 객체를 선언할 때 사용했던 초기값으로 세팅되어
스크롤 이동이 안되는 문제가 있었다.

문제는 다른 방법으로 해결했지만, useRef로 선택한 엘리먼트를
초기 렌더링 때 사용하고 싶으면 useEffect의 depth 배열에 추가 후
내부 함수에 코드를 작성해 주면 된다는 것을 알게 되었다.

import React,{useState,useRef,useEffect} from 'react'

const Test = () => {
  const [name,setName] = useState(''); 
  const inputRef = useRef();
  const onChange = (e) => {
    setName(e.target.value);
  }
  console.log("렌더링 됨")
  console.log("inputRef : ",inputRef);
  
  useEffect(()=>{
    // 선택한 돔에 대한 코드
    console.log("inputRef in useEffect",inputRef);
  },[inputRef]);

  return (
    <div>
      <input 
        type='text' 
        value={name} 
        onChange={onChange}
        ref={inputRef}
        />
    </div>
  )
}

콘솔을 보면 useEffect 안에서는 초기 렌더링 때에도
inputRef 엘리먼트를 바로 사용할 수 있는 것을 알 수 있다.

React를 배우며 작성한 글이라 틀린 내용이 있을 수 있습니다.
부디 참고만 해주시고, 혹시 틀린 내용이 있다면 댓글로 남겨주시면 감사하겠습니다 :)