타입스크립트에서 useRef 사용하기

 

 useRef로 생성된 객체 내에는 current라는 게 들어있는데 current을 읽어 오고 사용을 하는데 이 때 무조건 null check를 해줘야한다. 

 

import React, { useRef } from 'react';

const App = () => {
  const h1Ref = useRef<HTMLHeadingElement>(null);

  if (current !== null) {
  	// h1Ref 코드
  }

  return (
    <h1 ref={h1Ref}>App</h1>
  )
}

export default App;

 

 

 

 

 

출처

https://krpeppermint100.medium.com/ts-useref-%EC%9E%90%EC%84%B8%ED%9E%88-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-typescript-uselayouteffect-c9f1cf02ca5a

[TS]useRef 자세히 알아보기(Typescript, useLayoutEffect)

 

https://driip.me/7126d5d5-1937-44a8-98ed-f9065a7c35b5

TypeScript React에서 useRef의 3가지 정의와 각각의 적절한 사용법

 

https://linguinecode.com/post/how-to-use-react-useref-with-typescript

How to use React useRef with TypeScript