[React] useRef (실제 DOM 접근)

useRef가 반환하는 ref 객체를 접근하고자 하는 요소 태그에
ref 속성으로 넣어주면 해당 요소에 접근할 수 있다.

input 요소에 focus를 줄 때 많이 사용한다.

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

function App() {
  const inputRef = useRef();
  const [input, setInput] = useState("");

  useEffect(() => {
    inputRef.current.focus();
  }, [])

  const onChange = (e) => {
    setInput(e.target.value);
  }

  return (
    <div>
       <input
          type="text"
          value={input}
          onChange={onChange}
          ref={inputRef}
          placeholder="검색어를 입력하세요"
        />
    </div>
  );
}

export default App;

useEffect와 useRef를 사용해 맨 처음 화면이 실행될 때
input 요소에 focus를 주면 해당 요소를 클릭하지 않고 입력할 수 있다