리액트 타입스크립트 useRef - 셀프 개발자 코딩 부트캠프

useRef를 이용하면 DOM을 직접 참조할 수 있다.

import { createRef } from "react";
 
function App() {
 
 let refInput = createRef<HTMLInputElement>();
 
 function handleClick(e:React.MouseEvent<HTMLButtonElement, MouseEvent>) {
   refInput.current?.focus();
 }
 
 return (
  <>
   <input ref={refInput}></input>
   <button onClick={handleClick}>Click!!</button>
  </>
);
}
export default App;

버튼을 클릭하면 input에 포커스 된다.

 

import { createRef } from "react";
 
function App() {
 
 let refDiv = createRef<HTMLDivElement>();
 
 return (
  <>
   <div ref={refDiv}></div>
  </>
);
}
export default App;

div 를 참조할수도 있다.

 

https://jinibh.tistory.com/711

리액트 useState - 셀프 개발자 코딩 부트캠프