useRef() : DOM 조작하기

1. import

import {useRef} from 'react'

2. 원하는 태그에 해당 ref 속성부여

const anotherInput = useRef();

<input ref={anotherInput} type ="text"/>

3. 예제

[App.js]

버튼을 누르면 input 박스에 focus 시키기

import { useRef, react } from "react";
export default function App() {
  const anotherRef = useRef();
  const onClick = () => {
    anotherRef.current.focus();
  }; // 클릭하면 anotherRef에 의해 input 태그 focus

  return (
    <div className="App">
      <input ref={anotherRef} type="text" />
      <button onClick={onClick}>CLICK</button>{" "}
    </div>
  );
}