useRef .current null Error

에러

useRef를 사용시에 해당 ref(observedRef)를 console.log를 찍어보면 null로 찍힌다.

function App() {
  const observedRef = useRef<HTMLInputElement>(null);
  console.log(observedRef.current);

  return (
    <div ref={observedRef} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

해결방법

useRef는 리액트에서 DOM을 연결해주는 Hook으로써, 원하는 element에 ref 속성을 넣어주면 useRef가 객채를 반환하여 current 속성에 dom을 넣어준다. 바닐라 자바스크립트에서 document.getElementbyId. useRef 초기값에 어떤 값을 입력하더라도 null이 출력하게 되는데, 이는 리액트 라이프 사이클 특성상 렌더링이 완료되기 전에 useRef가 실행되기 때문이다. 이를 해결하기 위해서는 useEffect(useLayoutEffect)를 이용하자. 만약 useRef값(예:.current...)을 활용하고 싶다면 useState를 이용하여 상태를 만들자. 그렇지 않으면 해당 값은 useEffect 함수안에서만 사용 가능하기 때문이다.

const [isObserver, setObserver] = useState<HTMLInputElement>(null);

useEffect(() => {
  setObserver(observedRef);
}, [observedRef]);

console.log(isObserver.current);
// isObserver로만 출력해도 된다.

요약

• useRef가 null이라고 나오는 이유는 리액트 Life Cycle 특성상 발생하는 문제이다
• 따라서 useRef 값을 확인해보고 싶으면 useEffect를 이용하여 렌더링 완료 후 사용하자
• .current 값 등 useRef 값을 사용하고 싶으면 useState를 이용하여 상태를 만들자.

참조 문서 및 사이트

• useRef : Object is Possibly null 오류와 관련해서